问createBottomTabNavigator中的动态更改tabBarVisible
EN

Stack Overflow用户

提问于 2019-02-19 14:56:01

回答 1查看 668关注 0票数 0

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

react-native

react-navigation

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-19 18:03:05

由于needHide标志是在redux商店中预先设置的，所以最好的方法是创建一个自定义选项卡栏：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54760379

复制

相似问题

问createBottomTabNavigator中的动态更改tabBarVisible
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问createBottomTabNavigator中的动态更改tabBarVisibleEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问createBottomTabNavigator中的动态更改tabBarVisible
EN