title: 翻译|React-navigation(1)
date: 2017-03-27 20:26:48
categories: 翻译

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

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

原文开始：你好！移动导航

使用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运行，确保初始化正常
react-native run-android # or:
react-native run-ios

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

现在来创建‘App.js’

Stack Navigator介绍

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

//其实这个代码没有实现App.js，export的模式,注意
import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
//导入stack导航组件
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);

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

添加新的导航画面

再添加一个ChatScreen画面

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

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

 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>
    );
  }
}

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

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

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

传递参数

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

 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', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

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

 class ChatScreen extends React.Component {
  static navigationOptions = {
    // Nav options can be defined as a function of the navigation prop:
    title: ({ state }) => `Chat with ${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>
    );
  }
}

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

巢式导航

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

Tab Navigator的介绍

我们在App.js中创建TabNavigator：

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

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

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

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

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

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

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

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

 MainScreenNavigator.navigationOptions = {
  title: 'My Chats',
};

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

 <Button
  onPress={() => this.props.navigation.navigate('Chat', { user: 'Lucy' })}
  title="Chat with Lucy"
/>

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

配置头部

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

 this.props.navigation.navigate('Chat', { user:  'Lucy' });

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

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

设定头部标题

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

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

添加右侧的按钮

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

static navigationOptions = {
  header: {
    right: <Button title="Info" />,
  },
  ...

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

static navigationOptions = {
  title: ({ state }) => {
    if (state.params.mode === 'info') {
      return `${state.params.user}'s Contact Info`;
    }
    return `Chat with ${state.params.user}`;
  },
  header: ({ state, setParams }) => {
    // The navigation prop has functions like setParams, goBack, and navigate.
    let right = (
      <Button
        title={`${state.params.user}'s info`}
        onPress={() => setParams({ mode: 'info' })}
      />
    );
    if (state.params.mode === 'info') {
      right = (
        <Button
          title="Done"
          onPress={() => setParams({ mode: 'none' })}
        />        
      );
    }
    return { right };
  },
  ...

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

第一部分就这些.