React native 动态更改选项卡在CreateBoottomTabNavigator中可见

这是我的主页代码，我想使用needHide标志来控制tabBarVisible

const AppNavigator = createBottomTabNavigator(
{

    Find: {
        screen: FindIndexPage,

        navigationOptions: {
            tabBarIcon: ({focused}) => {
                return <BottomBarIcon iconName={'share-square-o'} focused={focused}/>
            },
            tabBarLabel: '热映',
            //TODO use needHide to control tabBarVisible
            tabBarVisible: false
        }
    },
    Hot: {
        screen: HotPage,

        navigationOptions: {
            tabBarIcon: ({focused}) => {
                return <BottomBarIcon iconName={'glass'} focused={focused}/>
            },
            tabBarLabel: '找片',
        }
    }
);

export default connect(
    (state) => ({
        needHide: state.changeMainBarVisibleReducer.needHide
    }), 
    (dispatch) => ({


    })
)(createAppContainer(AppNavigator));

---

由于在redux应用商店中预设了needHide标志，因此最好的方法是创建一个自定义选项卡栏：

const AppNavigator = createBottomTabNavigator({
  Find: {
    screen: FindIndexPage,
  },
  Hot: {
    screen: HotPage,
  }
}, {
  tabBarComponent: CustomTabBar
});

createAppContainer(AppNavigator));

您可以像任何其他组件一样将此自定义选项卡栏连接到redux。请注意，我还引用了CustomTabBarItem，这只是一个组件，您可以创建该组件来根据索引或routeName显示图标和选项卡文本

类CustomTabBar扩展了React.Component{ 公开演出{ const{navigation，needHide}=this.props； //导航器组件接收routes对象，该对象保存选项卡栏的所有路由 const routes=navigation.state.routes； 如果需要隐藏{ 回来 }; 回来 {routes.maproute，索引=>{ 回来 ; }} ; } navigationHandler=routeName:string=>{ this.props.navigation.navigaterouteName； } const styles=StyleSheet.create{ 容器：{ flexDirection:'行'， 对齐内容：“中心”， 身高：80， 宽度：“100%”， }, tabBarItem：{ 弹性：1， 对齐项目：“中心” } }; 常量mapStateToProps=状态=>{ 返回{ needHide:state.changeMainBarVisibleReducer.needHide }; }; 导出默认ConnectMapStateTopsCustomBar；

const AppNavigator = createBottomTabNavigator({
  Find: {
    screen: FindIndexPage,
  },
  Hot: {
    screen: HotPage,
  }
}, {
  tabBarComponent: CustomTabBar
});

createAppContainer(AppNavigator));