React Native入门（九）之导航组件React Navigation（1）StackNavigator

前言

本篇文章了解一下RN中导航组件的使用，且使用的是官方推荐的一个单独的导航库react-navigation，来分别了解一下这个库里边的StackNavigator，TabNavigator和DrawerNavigator这三个导航组件的基本使用！需要更加深入的了解的可以去官网查看其他相关的API：
React Navigation

使用

安装react-navigation库

首先呢，这个库是单独的，所以需要我们把这个库添加到我们的项目中去，在我们的项目目录执行：

yarn add react-navigation

然后等待下载安装成功即可！

StackNavigator

使用

这个导航组件主要用于不同页面之间的切换！，这个非常类似于Android中的Intent，来进行不同页面的挑战和数据的传值！
而且如果一个页面添加了StackNavigator，就在页面顶部多了一个导航栏，相当于Android中的Toolbar！

另外，如果只是针对iOS开发，可以使用NavigatorIOS这个组件，它是基于 UINavigationController封装的，所以看起来很像！

下面来看一下StackNavigator具体的使用：

//首先需要将StackNavigator引入import {  StackNavigator,} from 'react-navigation';class MainScreen extends Component{  //设置navigationOptions  static navigationOptions = {    title: '主页面',//标题  };  render() {    //navigation属性    const { navigate } = this.props.navigation;    return (      <View>        <Text style={{fontSize:20}}>我是MainScreen!</Text>        <Button title="跳到SecondScreen"                //点击跳转,参数为下边RouteConfigs中要跳转的routeName                onPress={()=>navigate('Sencond')}/>      </View>    );  }}class SecondScreen extends Component{  static navigationOptions ={    title: 次页面   };  render() {    return (      <View >        <Text style={{fontSize:20}}>我是SecondScreen！</Text>      </View>    );  }}//设置StackNavigator(RouteConfigs, StackNavigatorConfig)const App = StackNavigator({  Main: {screen: MainScreen},  Sencond: {screen: SecondScreen},});AppRegistry.registerComponent('AwesomeProject', () => App);

上边就是StackNavigator的基本用法，如果要在页面跳转的时候传递一些数据要这样写：

onPress={()=>navigate('Sencond',{ hello: '你好！' })}

在navigate()方法中添加第二个参数，格式为{ key: value }的形式！然后在第二个页面中接收数据：

render() {  const { params } = this.props.navigation.state;  return (    <View >      <Text style={{fontSize:20}}>{params.hello}我是SecondScreen！</Text>    </View>  );}

要先拿到传值页面中navigation属性的state:
const { params } = this.props.navigation.state;
然后取值params.key的形式拿到传递的值，例子中为params.hello。

另外如果我们在第二个接收页面设置navigationOptions的时候需要传递过来的参数，该怎么做呢？有两种方式都可以拿到：
①在接收页面中：

static navigationOptions = ({ navigation }) => ({    title: `次页面 ${navigation.state.params.hello}`,});

可以将navigationOptions定义为这个页面属性的函数，比如这里在设置title属性的时候，使用${navigation.state.params.hello}这个变量表示传递的值，需要注意的是外边需要`` 包围，这个是键盘Esc下边的键！这点要注意！
②我们在设置StackNavigator的时候，可以配置RouteConfigs！

StackNavigator({  Main: {screen: MainScreen},  Sencond: {    screen: SecondScreen,    navigationOptions: ({navigation}) => ({      title: `次页面 ${navigation.state.params.hello}`,    }),  },});

直接在配置第二个页面的RouteConfigs时，去设置navigationOptions，相当于重写了我们在SecondScreen中设置的navigationOptions，那么当然在跳转到第二个页面时会显示这里配置的navigationOptions，而不是在SecondScreen中设置的！

可以试一下：

class SecondScreen extends Component{  static navigationOptions = {    title: '我就不信我显示不了！',  };  ...}

运行一下：

是吧，你就是显示不了！哈哈哈…

配置

那么说到这里，我们在设置StackNavigator的时候都可以设置哪些东东？

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs：路由设置

这里参照官网：

StackNavigator({  // For each screen that you can navigate to, create a new entry like this:  //路由名字  Profile: {    // `ProfileScreen` is a React component that will be the main content of the screen.    //具体的页面    screen: ProfileScreen,    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.    // Optional: When deep linking or using react-navigation in a web app, this path is used:    //页面的路径    path: 'people/:name',    // The action and route params are extracted from the path.    // Optional: Override the `navigationOptions` for the screen    //导航栏选项    navigationOptions: ({navigation}) => ({      title: `${navigation.state.params.name}'s Profile'`,    }),  },  ...MyOtherRoutes,});

StackNavigatorConfig

Options for the router:

• initialRouteName - Sets the default screen of the stack. Must match one of the keys in route configs. 设置默认页面
• initialRouteParams - The params for the initial route.设置默认页面的传值
• navigationOptions - Default navigation options to use for screens. 设置默认的导航栏选项
• paths - A mapping of overrides for the paths set in the route configs. 重新路由设置中的path

还有一些视觉效果上面的配置，比如设置页面切换模式mode ，设置过渡动画transition等！可以参考官方文档！

navigationOptions导航栏选项

那么具体到一个页面中，navigationOptions都可以设置哪些参数?

• title设置标题（默认，在没有设置header相关属性下显示）
• header 设置导航栏头部，接收参数为React Element或者是一个返回React Element的给定HeaderProps参数的方法。如果设置为null,则整个标题栏就不显示了！
  这个属性的存在，我们就可以自定义我们的Header！
• headerRight 显示在header右边的组件，比如Android中常见的菜单按钮等，都可以通过这一属性设置！

其他的属性参数的设置，就不再说了，可以参考官方文档：
StackNavigator

结语

本篇文章主要介绍了React Navigation导航库中StackNavigator的使用，剩余的两个导航组件，我们放在下篇博客中了解！
好了，就这样，我们下篇文章再见！