вкладка динамического измененияBarVisible в createBottomTabNavigator

Question

Вот код моей главной страницы, я хочу использовать флаг needHide для управления вкладкойBarVisible

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

Поскольку флаг NeedHide предустановлен в вашем хранилище редуксов, лучше всего создать собственную панель вкладок:

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

createAppContainer(AppNavigator));

Вы можете подключить эту панель вкладок к редуксу, как и любой другой компонент.,Обратите внимание, что я также ссылаюсь на CustomTabBarItem, это просто компонент, который вы создаете, чтобы отобразить значок и текст вкладки на основе индекса или routeName.

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);