React Native 路由（页面跳转）
1 曾经的官方Navigation 后来0.44分离出来
React Native 页面跳转 （版本号:0。48)
源地址，只是简单翻译
React Navigation
初始化一个新的项目
# 创建一个新的RN APP
react-native init SimpleApp
cd SimpleApp
# 安装相关库 国内可能要用yarn？我用了梯子
npm install --save react-navigation
react-native install
#运行
react-native run-android # or:
react-native run-ios
引入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',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
添加一个新的页
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
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>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
引用自开头的地址
