首先要确认已经配置好react-native的环境。
# 创建一个native应用,SimpleApp,然后进入项目目录
react-native init SimpleApp
cd SimpleApp
# 通过npm安装最新版本的react-navigation
npm install --save react-navigation
# 运行程序
react-native run-android
引入Stack Navigator
对于我们的应用程序,我们想要使用堆栈式导航器,因为我们想要一个概念的“堆栈”导航,其中每个新屏幕都放在堆栈顶部,然后从堆栈顶部移除一个屏幕。
import React from 'react';import { AppRegistry, Text,} from 'react-native';import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome world', }; render() { return
const SimpleApp = StackNavigator({ Home: { screen: HomeScreen },});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
屏幕的title在静态导航选项中是可配置的,在这里可以设置许多选项来配置导航器中的屏幕显示。