Question

这是我的主页代码，我想使用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));

这是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商店中预设了needHide标志，所以最好的方法是创建自定义标签栏：

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

createAppContainer(AppNavigator));

您可以将此自定义标签栏连接到redux，就像其他任何组件一样。请注意，我还引用了一个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);

动态更改tabBarVisible在createBottomTabNavigator中

1 个答案: