动态更改tabbarvisible在CreateBottomTabnavigator中

Question

这是我的主要页面代码，我想使用"需要标志"来控制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));

这是FindIndExpage代码

const App = createStackNavigator({
    FIND_MAIN_TAB: {
       screen: Main,
        navigationOptions: {
            header: null,
        }
    },
    FIND_SEARCH_CITY_TAB: {
        screen: searchCity,
        navigationOptions: {
            header: null
        }
    },
}, {
    headerLayoutPreset: 'center'
 });
export default createAppContainer(App);

Answer 1

由于需要在您的Redux商店中预设使用标志，因此最好的方法是创建自定义标签栏：

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

您可以像其他任何组件一样将此自定义标签栏连接到redux。请注意，我还引用了fustantabbaritem，这只是您创建的一个组件，它基于索引或路由，以显示图标和选项卡文本。

class CustomTabBar extends React.Component {
  public render() {
    const {navigation, needHide} = this.props;
    // a navigator component receives a routes object, which holds all the routes of your tab bar
    const routes = navigation.state.routes;
    if (needHide) {
      return <View/>;
    };
    return (
      <SafeAreaView>
        <View style={styles.container}>
          {routes.map((route, index) => {
            return (
              <View style={styles.tabBarItem} key={route.routeName}>
                <CustomTabBarItem
                  routeName={route.routeName}
                  onPress={this.navigationHandler}
                  focused={navigation.state.index === index}
                  index={index}
                />
              </View>
            );
          })}
        </View>
      </SafeAreaView>
    );
  }

 navigationHandler = (routeName: string) => {
    this.props.navigation.navigate(routeName);
  }
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignContent: 'center',
    height: 80,
    width: '100%',
  },
  tabBarItem: {
    flex: 1,
    alignItems: 'center'
  }
});
const mapStateToProps = (state) => {
  return {
    needHide: state.changeMainBarVisibleReducer.needHide
  };
};
export default connect(mapStateToProps)(CustomTabBar);