react-native – React Native – 动态更改tabnavigator中的背景

发布时间：2020-12-15 09:31:37 所属栏目：百科来源：网络整理

导读：我想根据我的API响应动态更改我的标签导航器背景颜色,所以下面是我的代码 _TabNavigator.js const MyTabnav = TabNavigator({ScreenOne: { screen: ({ navigation,screenProps }) = ScreenOneNav screenProps={{ tabbarNavigation: navigation,...screenProp

我想根据我的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,}} onNavigationStateChange={null} />,tabBarIcon: ({ tintColor }) => (
            <View style={[styles.tabViewBox]}>
                <Text style={[styles.tabText,{ color: tintColor }]}>ScreenTwo</Text>
            </View>
        )
    }
},ScreenThree: {
    screen: ({ navigation,screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation,navigationOptions: {
        tabBarLabel: 'Notifications',{ color: tintColor }]}>ScreenThree</Text>
            </View>
        )
    }
},},{

    tabBarOptions: {

        style: {
            backgroundColor: white,height: 55,borderTopColor: 'transparent',borderTopWidth: 1,paddingRight: 10,paddingLeft: 10,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的更新代码建议给出以下警告信息

enter image description here

解决方法

你可以做的是制作一个自定义tabBar组件,并使用javaScript immutability概念,你可以覆盖tabBarOptions的样式.

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

        tabBarOptions: {

            style: {
                backgroundColor: white,borderTopColor: grayPlaceHolder
            },//Here Goes Your CustomTabBar Component 
        tabBarComponent : CustomTabBarComponent,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.1)',position: 'absolute',bottom: 0,left: 0,right: 0
                },activeTintColor: '#fff',inactiveTintColor: '#bbb',);


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

现在,您可以将此CustomTabBarComponent与Redux存储连接,并可以更改所需属性的值.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!