http://www.jianshu.com/p/4d14bd41dff3

这个React-native的导航系统可能已经基本官方标配系统了.两个月时间已经积累了3000多的star.
教程可以参考这篇文章,这个文章作者老兄和我一样很喜欢折腾.前面就参考了他的另一个导航教程,这次再来.

本文是翻译的官方文档.打算翻译完
基本思路是有几个注册系统,如果要在app中使用导航,必须要把组件注册到对应的系统中.

原文开始&＃xff1a;你好&＃xff01;移动导航

使用React Navigation来构建跨平台导航

配置和安装

首先要配置React Native系统.接下来创建RN项目,添加react-navigation

# Create a new React Native App#创建新RN APP
react-native init SimpleApp
cd SimpleApp# Install the latest version of react-navigation from npm安装最新版本
npm install --save react-navigation# Run the new app运行&＃xff0c;确保初始化正常
react-native run-android # or:
react-native run-ios

初始化界面

为了在Android和iOS之间共享代码,删除掉index.ios.js和index.andorid.js的实际代码,使用import &＃39;./App&＃39;来实现具体的代码

现在来创建‘App.js’

Stack Navigator介绍

为了想使用stack navigation的概念,我们会使用StactkNavigator.(译注&＃xff1a;stack就是数据结构的堆栈技术,遵循后进先出的原理).每一个被到导航的screen(导航画面)被放在堆栈的栈顶,返回时候,会从栈顶弹出对应的组件.先看看一个screen的情况

//其实这个代码没有实现App.js&＃xff0c;export的模式,注意
import React from &＃39;react&＃39;;
import {AppRegistry,Text,
} from &＃39;react-native&＃39;;
//导入stack导航组件
import { StackNavigator } from &＃39;react-navigation&＃39;;class HomeScreen extends React.Component {static navigationOptions &＃61; {title: &＃39;Welcome&＃39;,//在导航中显示的标题内容};render() {//这里可以是导入的其他组件return <Text>Hello, Navigation!Text>;}
}
//进行导航的注册
const SimpleApp &＃61; StackNavigator({Home: { screen: HomeScreen },
});AppRegistry.registerComponent(&＃39;SimpleApp&＃39;, () &＃61;> SimpleApp);

title是staticnavigationOptions里配置的标题内容,出现的界面看下面

添加新的导航画面

再添加一个ChatScreen画面

class ChatScreen extends React.Component {static navigationOptions &＃61; {title: &＃39;Chat with Lucy&＃39;,};render() {return (<View><Text>Chat with LucyText>View>);}
}

在HomeScreen中添加一个button组件,使用routeName Chat关联到ChatScreen.

class HomeScreen extends React.Component {static navigationOptions &＃61; {title: &＃39;Welcome&＃39;,};render() {const { navigate } &＃61; this.props.navigation;return (<View><Text>Hello, Chat App!Text><ButtononPress&＃61;{() &＃61;> navigate(&＃39;Chat&＃39;)}title&＃61;"Chat with Lucy"/>View>);}
}

我们正在使用从screen navigation prop获得的导航函数转向ChatScreen.但是这需要在StackNavigator中注册.

const SimpleApp &＃61; StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },//新添加的screen
});

现在可以导航到ChatScreen,也可以返回了.

传递参数

在ChatScreen中硬编码标题不是好办法,可以在导航的时候传递参数.首先编辑一下HomeScreen组件,传递name参数到路由中.

class HomeScreen extends React.Component {static navigationOptions &＃61; {title: &＃39;Welcome&＃39;,};render() {const { navigate } &＃61; this.props.navigation;return (<View><Text>Hello, Chat App!Text><ButtononPress&＃61;{() &＃61;> navigate(&＃39;Chat&＃39;, { user: &＃39;Lucy&＃39; })}title&＃61;"Chat with Lucy"/>View>);}
}

我们可以编辑ChatScreen组件显示的name参数,这个参数通过route来传递.

class ChatScreen extends React.Component {static navigationOptions &＃61; {// Nav options can be defined as a function of the navigation prop:title: ({ state }) &＃61;> &＃96;Chat with ${state.params.user}&＃96;,};render() {// The screen&＃39;s current route is passed in to &＃96;props.navigation.state&＃96;:const { params } &＃61; this.props.navigation.state;return (Chat with {params.user});}
}

现在当你导航到Chat screen的时候,可以看到名字了.在HomeScreen中改变name,看看变化.

巢式导航

在移动应用中组合各种形式的导航是非常普遍的.React Navigation中的router和navigators是组合式的,如此以来可以允许我们定义非常复杂的导航系统.

Tab Navigator的介绍

我们在App.js中创建TabNavigator&＃xff1a;

class RecentChatsScreen extends React.Component {render() {return <Text>List of recent chatsText>}
}class AllContactsScreen extends React.Component {render() {return <Text>List of all contactsText>}
}const MainScreenNavigator &＃61; TabNavigator({Recent: { screen: RecentChatsScreen },All: { screen: AllContactsScreen },
});

如果MainScreenNavigation作为顶层的导航组件来渲染,看起来是这个样子的:

在屏幕中构造一个巢式导航器

我们想让这些tabs在app的第一屏显示,但是堆栈中的新的screen会覆盖tabs.
在前一步骤设置的StackNavigator中添加tabs作为顶级导航

const SimpleApp &＃61; StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});

因为MainScreenNavigator作为screen,可以传递navigationOtions参数:

MainScreenNavigator.navigationOptions &＃61; {title: &＃39;My Chats&＃39;,
};

在每一个tabs中添加链接到chat的按钮:

this.props.navigation.navigate(&＃39;Chat&＃39;, { user: &＃39;Lucy&＃39; })}title&＃61;"Chat with Lucy"
/>

现在我们在每个导航器彼此之间做了配置,可以在导航界面之间切换.

配置头部

在前面的例子中,我们用StactNavigator创建了几个screen.
当我们导航到chat screen,我们通过navigate 函数传递特定的参数到新的导航界面.例如,我们想给chat screen提供一个人名:

this.props.navigation.navigate(&＃39;Chat&＃39;, { user: &＃39;Lucy&＃39; });

user参数可以在chat screen中获取到:

class ChatScreen extends React.Component {render() {const { params } &＃61; this.props.navigation.state;return <Text>Chat with {params.user}Text>;}
}

设定头部标题

接着来,可以在screen 参数中配置头部的标题

class ChatScreen extends React.Component {static navigationOptions &＃61; {// // Title may be a simple string:// title: &＃39;Hello&＃39;,// Or the title string may be a function of the navigation prop:可以是prop的函数解析title: ({ state }) &＃61;> &＃96;Chat with ${state.params.user}&＃96;};...
}

添加右侧的按钮

可以在option中添加定制的右侧按钮

static navigationOptions &＃61; {header: {right: "Info" />,},...

和title一样,headeroption可以定义为prop的一个函数.让我们来基于导航参数渲染一个不同的按钮,设定为点击时调用navigation.setParams:

static navigationOptions &＃61; {title: ({ state }) &＃61;> {if (state.params.mode &＃61;&＃61;&＃61; &＃39;info&＃39;) {return &＃96;${state.params.user}&＃39;s Contact Info&＃96;;}return &＃96;Chat with ${state.params.user}&＃96;;},header: ({ state, setParams }) &＃61;> {// The navigation prop has functions like setParams, goBack, and navigate.let right &＃61; ( setParams({ mode: &＃39;info&＃39; })}/>);if (state.params.mode &＃61;&＃61;&＃61; &＃39;info&＃39;) {right &＃61; ( setParams({ mode: &＃39;none&＃39; })}/> );}return { right };},...

现在头部可以和screen的路由state进行交互了.

第一部分就这些.