react-navigation使用

作者: linzaifei | 来源:发表于2018-05-29 15:52 被阅读31次

    最近写RN项目遇到很多问题!看了很多项目用到的react-navigation还是1.5.11的版本,遇到很多问题(忙了好几天才找到问题)比如在使用createBottomTabNavigator 和createStackNavigator 嵌套时候坑来了,标题设置不上去!伤脑子(使用的最新react-navigation 版本2.0.4)

    const TabNavigator = createBottomTabNavigator({
        Feed: Home,
        Profile: Mine,
    });
    const AppNavigator = createStackNavigator({
        Home: TabNavigator,
        Settings: Detail,
    });
    
    //下面是首页设置的标题(我的界面一样的)
     export default class Home extends Component {
      static navigationOptions={
          headerTitle:'首页'
      }
      render() {
          return (
                  <Text>这是Home</Text>
          );
      }
    }
    
    没有标题

    然后我再我给AppNavigator 这是导航栏信息出现但是不是我想要的效果!(但是还是不能单独在子控制器里面设置标题,这是更改TabNavigator在每一个路由的显示效果)

    TabNavigator.navigationOptions = ({ navigation }) => {
        let { routeName } = navigation.state.routes[navigation.state.index];
        // 在这里你可以选择基于路由的名称
        let headerTitle = routeName;
        return {
            headerTitle,
      };
    };
    

    我想要是是给他的子类设置导航栏信息(然后想到把AppNavigator 的header给隐藏掉,先给每一个控制器加上导航栏在隐藏TabNavigator 的导航栏)

    const FeedStack = createStackNavigator({
        FeedHome: Home,
    });
    const ProfileStack = createStackNavigator({
        ProfileHome: Mine,
    });
    const TabNavigator = createBottomTabNavigator({
      Feed: FeedStack,
      Profile: ProfileStack,
    });
    
    TabNavigator.navigationOptions = {
      // 从堆栈AppNavigator隐藏标题
        header: null,
    };
    
    const AppNavigator = createStackNavigator({
        Home: TabNavigator,
        Settings: Detail,
    });
    

    这样就完美的解决了!(解决子导航栏设置不上标题问题)

    相关文章

      网友评论

      • 小vv:这样子做跳转页面 tabbar好隐藏吗?
        linzaifei:@小vv 不知道你想要的效果什么样子的!一会上传代码!你要是想隐藏tabbar!在createbottomTabNavigtor 里面设置 tabBarComponent:()=>null这样就可以隐藏tabbar了
        小vv::dizzy_face: 隐藏tabbar是哪里设置 我晕了一天了
        linzaifei:@小vv 好隐藏!已经试过了!没有什么问题

      本文标题:react-navigation使用

      本文链接:https://www.haomeiwen.com/subject/tixwvxtx.html