1.1 React Navigation 中文文档 Hello Mobile Navigation

安装和安装

首先，确保您都设置为使用React Native。接下来，创建一个新项目并添加：react-navigation

# Create a new React Native 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

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

我们希望分享iOS和Android的代码，所以让我们删除的内容，并与更换。index.ios.jsindex.android.jsimport './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);

在屏幕上可配置的静态，那里有很多选项可以设置来配置屏幕的呈现在导航。titlenavigationOptions

现在iPhone和Android应用都会出现相同的屏幕：

添加新屏幕

在我们的文件中，我们添加一个新屏幕：App.jsChatScreen

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

然后，我们可以向我们的组件添加一个按钮，链接到使用。HomeScreenChatScreenrouteName Chat

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

我们正在使用屏幕导航支柱的导航功能转到。但是，直到我们将其添加到我们这样做，这将不会起作用：ChatScreenStackNavigator

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

现在，您可以导航到新屏幕，然后返回：

传递参数

硬编码一个名字不是很理想。如果我们可以传递一个名称来代替，那将会更有用，所以让我们这样做。ChatScreen

除了在导航功能中指定目标之外，我们还可以传递将放入新路由的参数。首先，我们将编辑我们的组件以将参数传递到路由中。routeNameHomeScreenuser

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

然后，我们可以编辑我们的组件以显示通过路由传递的参数：ChatScreenuser

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

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