React Navigation-嵌套导航器

在移动应用中常见的是组成各种形式的导航。 React Navigation中的路由器和导航器是可组合的，这使您可以为您的应用定义复杂的导航结构。
对于我们的聊天应用程序，我们希望在第一个屏幕上放置几个标签，以查看最近的聊天线索或所有联系人。

介绍Tab Navigator

在App.js 中创建一个新的 TabNavigator

import { TabNavigator } from "react-navigation";

class RecentChatsScreen extends React.Component {
  render() {
    return List of recent chats
  }
}

class AllContactsScreen extends React.Component {
  render() {
    return List of all contacts
  }
}

const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

如果MainScreenNavigator呈现为顶级导航器组件，则它将如下所示

将导航器嵌套在屏幕中

我们希望这些选项卡在应用程序的第一个屏幕中可见，但堆叠中的新屏幕应该覆盖这些选项卡。
我们让标签导航器成为我们在上一步中设置的顶层StackNavigator中的一个屏幕。

const SimpleApp = StackNavigator({
  Home: { screen: MainScreenNavigator },
  Chat: { screen: ChatScreen },
});

由于MainScreenNavigator被用作一屏，我们可以给它navigationOptions；

const SimpleApp = StackNavigator({
  Home: { 
    screen: MainScreenNavigator,
    navigationOptions: {
      title: 'My Chats',
    },
  },
  Chat: { screen: ChatScreen },
})

可以添加一个button 链接到聊天界面

在一个组件中嵌套组件

有时需要导航器装在组件中。在导航器只占用屏幕一部分的情况下非常有用。为了将子导航器连接到导航树中，需要父导航器的navigation属性。

const SimpleApp = StackNavigator({
  Home: { screen: NavigatorWrappingScreen },
  Chat: { screen: ChatScreen },
});

在这种情况下，NavigatorWrappingScreen不是导航器，但是它将导航器作为其输出的一部分。
如果此导航器呈现空白，则将更改为。

class NavigatorWrappingScreen extends React.Component {
  render() {
    return (
      
        
        
      
    );
  }
}

要将MainScreenNavigator连接到导航树，我们将其路由器分配给包装组件.这使NavigatorWrappingScreen“导航感知”，它告诉父导航传给子导航navigation对象。由于NavigatorWrappingScreen的路由器被子导航器的路由器覆盖，所以子导航器将接收到所需navigation。

class NavigatorWrappingScreen extends React.Component {
  render() {
    return (
      
        
        
      
    );
  }
}
NavigatorWrappingScreen.router = MainScreenNavigator.router;

这段比较绕脑，存在的问题比较多
我们暂时不添加组件

class RecentChatsScreen extends React.Component {
    render() {
        const {
            navigate,
            state,
        } = this.props.navigation;
        return 
    }
}
//Nesting a Navigator in a Component 
class NavigatorWrappingScreen extends React.Component {
    render() {
        return (
            
        );
    }
}
//Nesting a Navigator in a screen
const MainScreenNavigator = TabNavigator({
    Recent: {
        screen: RecentChatsScreen
    },
    All: {
        screen: AllContactsScreen
    },
});

const SimpleApp = StackNavigator({
    Home: {
        screen: NavigatorWrappingScreen,
        navigationOptions: {
            title: 'My Chats',
        },
    },
    Chat: {
        screen: ChatScreen
    },

})
export default SimpleApp;

看到 SimpleApp 和 MainScreenNavigator 形成了父子关系。理论是是形成了两个navigation . 当我们在RecentChatsScreen 组件中访问路由表chat 是不能被访问的。
必须在NavigatorWrappingScreen 组件中改造

//Nesting a Navigator in a Component 
class NavigatorWrappingScreen extends React.Component {
    render() {
        return (
            
        );
    }
}
NavigatorWrappingScreen.router = MainScreenNavigator.router;

回到官网的例子添加SimpleApp 并没有解决父子之间访问的关系，希望有人解答一下

[Configuring headers http://www.jianshu.com/p/8326e331ff4d
]
previous: Hello mobile
next: Configuring headers

React Navigation-嵌套导航器

介绍Tab Navigator

将导航器嵌套在屏幕中

在一个组件中嵌套组件

你可能感兴趣的:(React Navigation-嵌套导航器)