React-navigation 官方文档中文翻译(一) Hello Mobile Navigation

版本号: 1.0.0-beta.12

Hello Mobile Navigation

我们使用React Navigation为Android和iOS构建一个简单的聊天应用程序。

配置和安装

首先,确保将使用React Native(ps:原文太扯).接下来，创建一个新项目并添加：react-navigation

# Create a new React Native Appreact-native init SimpleAppcd SimpleApp# Install the latest version of react-navigation from npmnpm install --save react-navigation# Run the new appreact-native run-android # or:react-native run-ios 

验证您是否可以成功查看到在iOS和/或Android上运行的裸示例应用程序：

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

介绍Stack Navigator

   对于我们的应用程序，我们希望使用这个方法，因为我们需要一个概念性的“栈”导航，每个新屏幕都放在堆栈顶部，并返回从堆栈顶部移除一个屏幕。我们从一个屏幕开始：StackNavigator

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

 title是static  navigationOptions里配置的标题内容,这里有许多选项来配置导航器中的界面显示,现在iPhone和Android应用都会出现相同的界面：

添加新屏幕

    在我们的文件中，我们添加一个新屏幕: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 },});

现在你就可以跳转到新的界面以及返回

传递参数

写死名称到ChatScreen不是很理想,如果我们可以传递一个名称来代替，那将会更有用，所以让我们这样做。除了在导航功能中指定目标routeName之外，我们还可以传递将放入新路由的参数。首先，我们将编辑我们的HomeScreen 组件以将user参数传递到路由中。

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组件以显示通过路由传递的user参数：

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

 现在，您可以在导航到聊天屏幕时看到名称。尝试改变HomeScreen的user参数，看看会发生什么！

React-navigation 官方文档中文翻译(二) Nesting Navigators