3

我想根据我的 API 响应动态更改我的标签导航器背景颜色，所以下面是我的代码

_TabNavigator.js

const MyTabnav = TabNavigator({
ScreenOne: {
    screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
    navigationOptions: {
        tabBarLabel: 'ScreenOne',
        tabBarIcon: ({ tintColor }) => (
            <View style={[styles.tabViewBox]}>
                 <Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
            </View>
        )
    }
},
ScreenTwo: {
    screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
    navigationOptions: {
        tabBarLabel: 'ScreenOne',
        tabBarIcon: ({ tintColor }) => (
            <View style={[styles.tabViewBox]}>
                <Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
            </View>
        )
    }
},
ScreenThree: {
    screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
    navigationOptions: {
        tabBarLabel: 'Notifications',
        tabBarIcon: ({ tintColor }) => (
            <View style={[styles.tabViewBox]}>
                 <Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
            </View>
        )
    }
},
},
 {

    tabBarOptions: {

        style: {
            backgroundColor: white,
            height: 55,
            borderTopColor: 'transparent',
            borderTopWidth: 1,
            paddingRight: 10,
            paddingLeft: 10,
            borderTopWidth: 1,
            borderTopColor: grayPlaceHolder
        },
        showLabel: false,
        showIcon : true,
    },
    tabBarComponent : TabBarBottom,

    initialRouteName: 'ScreenTwo',
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
}, []);


var styles = StyleSheet.create({
tabText: {
    fontSize: 10,
    fontWeight: "600",
    flex: 4,
},
tabViewBox: {
    flex: 1,
    alignItems: "center",
},
 tabIcon: {
    flex: 5,
    alignSelf: "center",
    marginTop: 10
  },
});
export default StocksTabNav;

我想在我的 ScreenTwo.js 文件中更改我的 tabnavigtor 背景颜色，其中包含 API 响应代码，因为它 tabnavigator 背景颜色（backgroundColor）应该根据 API 响应更改为黑色或白色，那么我该如何实现呢？你的所有建议都是可观的

根据 Rahul 建议更新代码后，给出以下警告消息

在此处输入图像描述

4

3 回答 3

4

您可以做的是制作一个自定义 tabBar 组件并使用 javaScript 不变性概念，您可以覆盖 tabBarOptions 的样式。

     const MyTabnav = TabNavigator({ScreenOne: {
        screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                     <Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
                </View>
            )
        }
    },
    ScreenTwo: {
        screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                    <Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
                </View>
            )
        }
    },
    ScreenThree: {
        screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'Notifications',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                     <Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
                </View>
            )
        }
    },
    },
     {

        tabBarOptions: {

            style: {
                backgroundColor: white,
                height: 55,
                borderTopColor: 'transparent',
                borderTopWidth: 1,
                paddingRight: 10,
                paddingLeft: 10,
                borderTopWidth: 1,
                borderTopColor: grayPlaceHolder
            },
            showLabel: false,


         showIcon : true,
        },

//Here Goes Your CustomTabBar Component 
        tabBarComponent : CustomTabBarComponent,
        initialRouteName: 'ScreenTwo',
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false
    }, []);

CustomTabBarComponent.js

     const TabBar = (props) => {
          const { navigationState } = props;
          let newProps = props;

            newProps = Object.assign(
              {},
              props,
              {
                style: {

         // get value from redux store and set it here 
                  backgroundColor: 'rgba(0,0,0,0.1)',
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  right: 0
                },
                activeTintColor: '#fff',
                inactiveTintColor: '#bbb',
              },
            );


          return <TabBarBottom {...newProps} />;
        };

现在您可以将此 CustomTabBarComponent 与 Redux 存储连接，并可以更改您想要的任何属性的值。

于 2018-03-01T14:29:30.837 回答
3

您需要做的是将选项卡组件设置为函数并将颜色作为参数发送给该函数。试试这个：

const MyTabnav = color => TabNavigator({
    ScreenOne: {
        screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                    <Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
                </View>
             )
        }
    },
    ScreenTwo: {
        screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'ScreenOne',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                   <Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
                </View>
             )
        }
    },
    ScreenThree: {
        screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
        navigationOptions: {
            tabBarLabel: 'Notifications',
            tabBarIcon: ({ tintColor }) => (
                <View style={[styles.tabViewBox]}>
                     <Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
                </View>
            )
        }
    },
},
{

    tabBarOptions: {
        //use the color you passed in the prop here:
        style: {
            backgroundColor: color,
            height: 55,
            borderTopColor: 'transparent',
            borderTopWidth: 1,
            paddingRight: 10,
            paddingLeft: 10,
            borderTopWidth: 1,
            borderTopColor: grayPlaceHolder
        },
        showLabel: false,
        showIcon : true,
    },
    tabBarComponent : TabBarBottom,

    initialRouteName: 'ScreenTwo',
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
    }, []);


var styles = StyleSheet.create({
    tabText: {
        fontSize: 10,
        fontWeight: "600",
        flex: 4,
    },
    tabViewBox: {
        flex: 1,
        alignItems: "center",
    },
    tabIcon: {
        flex: 5,
        alignSelf: "center",
        marginTop: 10
    },
});
export default MyTabNav;


然后在你使用的地方MyTabnav将颜色作为参数传递给它。例如

export default class App extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            color: 'black'
        };
    }
    getRandomColor = () => {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    };
    onPress = () => {
        this.setState({
            color: this.getRandomColor()
        });
    };
    render() {
        const Tabs = MyTabnav(this.state.color);
        return (
            <View style={{ flex: 1 }}>
                <Button onPress={this.onPress} title="Click me" />
                <Tabs />
            </View>
        );
    }
}
于 2018-03-01T06:59:11.057 回答
0

尝试使用

const tabBarOptions = {
// setting height 'null', and top 0 will change the color of pressed tab
   indicatorStyle: {
     height: null,
     top: 0,
     backgroundColor: "red",
     borderBottomColor: "black",
     borderBottomWidth: 3,
   },
   activeTintColor: "black",
   pressColor: "white",
   style: {
     backgroundColor: "#ddc8be",
   },
   labelStyle: { fontSize: 13 },
};
于 2020-09-05T17:47:47.543 回答