三React Native中Navigation组件的快速入门

前言

最近在看React Native中导航组件Navigation的用法，它是github上的一个插件，说实话，比原生的Navigator组件好用得多，刚开始看原生的导航组件Navigator那真是一个个坑，到现在也有很多东西没解决。前几天突然在Github上找到一个Navigation组件，简单看了下，环境几乎不费力的就搭好了，它的github地址，官网地址。

官网上关于它的用法讲解已经比较详细了，这里只是简单记录下。

介绍

React Navigation诞生于React Native社区，它是被需要于一种可扩展的容易使用的解决方案。它用来替换原生几个系统的Navigator库，包括Ex-Navigation,Navigator和NavigationExperimental组件，React Navigation作为一种更高水平的代码也可以被用作React项目。

环境搭建

1.初始化一个项目

2.安装navigation组件

npm install --save react-navigation

接下来就可以通过import导入放心使用

快速入门

对于我们的app，我们去用StackNavigator，每一个新的screen是被放在栈顶，当我们想去移除，也可以优先被移除，也就是说它的内部使用的数据结构是栈式数据结构，后进先出（LIFO）

一个screen

看HomeScreen代码

import React from 'react';
import {
  AppRegistry,Text,} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationoptions = {
    title: 'Welcome',};
  render() {
    return <Text>Hello,Navigation!</Text>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },});

AppRegistry.registerComponent('SimpleApp',() => SimpleApp);

screen的title是通过static navigationoptions 配置的，同时也还有其他options可以配置。安装的navigation可以通过import { StackNavigator } from 'react-navigation' 导入

现在看下效果

多个Screen

再添加一个Screen，暂且称作为：ChatScreen

class ChatScreen extends React.Component {
  static navigationoptions = {
    title: 'Chat with Lucy',};
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

然后我们在主Screen中添加一个button，通过这个button链接到ChatScreen，链接的方法是通过一个路由名 Chat指定，这个Chat可以随意命名。修改主Screen中代码：

class HomeScreen extends React.Component {
  static navigationoptions = {
    title: 'Welcome',};
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello,Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}
const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },Chat: { screen: ChatScreen },});

每添加一个screen可以通过StackNavigator注册

看下效果：

传递参数

先看下代码

class HomeScreen extends React.Component {
  static navigationoptions = {
    title: 'Welcome',Chat App!</Text>
        <Button
          onPress={() => navigate('Chat',{ user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

我们可以看见，通过这样的形式传递了代码{ user: 'Lucy' }，接下来我们，就可以在ChatScreen中获取参数

class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationoptions = ({ navigation }) => ({
    title: navigation.state.params.user,});
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}