1.1 React Navigation 中文文档 Hello Mobile Navigation

作者: cayman 分类: React Navigation 发布时间: 2017-06-13 13:14

安装和安装

首先,确保您都设置为使用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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注