本篇博客只是翻译记录一下

初始化项目

react-native init pro_name // pro_name是你自己的项目名称

然后需要加入navigation

npm install --save react-navigation

这时候运行react-native run-android可能会报错，说不认识run-android命令

就需要执行

yarn add react-navigation命令，然后再执行react-native run-android就好了。

上图，图不是很清晰，找来找去没找到好的录制gif的应用

首先是Index.js文件

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('navigation_pro1',() => App);

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{
  Component
} from 'react';
import {
  Platform,StyleSheet,Text,View
} from 'react-native';
import {
  StackNavigator
} from 'react-navigation';
import HomeScreen from './js/HomeScreen';
import ChatScreen from './js/ChatScreen';


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


export default class App extends Component < {} > {
  render() {
    return <SimpleApp / > ;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,instructions: {
    textAlign: 'center',color: '#333333',marginBottom: 5,});

import React,{ Component } from 'react';
import {
  Platform,View,Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';

export default class HomeScreen extends Component{
  static navigationOptions={
    title:'Welcome'
  };
  render(){
  	const {navigate}=this.props.navigation;
    return (
    	<View>
    	 <Text>Hello,Navigation!</Text>
    	 <Button 
			onPress={()=> navigate('Chat',{user:
				'小明'})}
			title='Chat with Lucy'
    	 />
        </View>
    );
  }

}

import React,{
	Component
} from 'react';
import {
	Text,View
} from 'react-native';
import {
	StackNavigator
} from 'react-navigation';

export default class ChatScreen extends Component {
	static navigationOptions = ({
		navigation
	}) => ({
		title:`Chat with ${navigation.state.params.user}`
	});
	render() {
		const {
			params
		} = this.props.navigation.state;
		return ( < View >
			< Text > 我是ChatScreen页面 {
				params.user
			} < /Text>

			< /View>
		);
	}
}

另外英语好的兄弟可以直接看文档

点击打开链接