弄了一天,终于跑起来了,可以说历经千辛万险!
最好的教程是React Navigation的官网:https://reactnavigation.org/
StackNavigator 的原理:StackNavigator 是一个移动的“卡片堆栈”,每一个新屏幕都放在堆栈的顶部,删除一个屏幕是将它从堆栈的顶部移出。
以window平台的android环境为例(react-native 版本是0.5),新建一个SimpleApp的react-native项目,导入 react-navigation
# 创建一个新的 React Native 应用
react-native init SimpleApp
cd SimpleApp
# 从npm安装最新版本的react-navigation
npm install --save react-navigation
# 这一步可以忽略,在window平台上,npm安装新的模块,下面运行项目的run-abdroid会失效,通过npm install刷新下
npm install
# 运行android环境
react-native run-android
等待几分钟项目初始化后,导进vscode,将App.js文件清空
- 导入组件
import React from 'react';
import { AppRegistry,StyleSheet,Text,View,Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
- 加入两个屏幕HomeScreen 和ChatScreen
//ChatScreen 屏幕
class ChatScreen extends React.Component {
// 导航栏的选项可以被定义为屏幕属性的函数
static navigationOptions = ({ navigation }) => ({
//${navigation.state.params.user} 是一个动态的参数,参数名为user
title: `Chat with ${navigation.state.params.user}`,});
render() {
//屏幕当前的路由通过屏幕属性的状态传递
const { params } = this.props.navigation.state;
return (
<View>
//params 是参数的意思,params.user表示参数user的值
<Text>Chat with {params.user}</Text>
</View>
);
}
}
//HomeScreen 屏幕
class HomeScreen extends React.Component {
//导航栏写成固定的Welcome
static navigationOptions = {
title: 'Welcome',};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello,Chat App!</Text>
//定义按钮组件,增加点击事件,把user: 'Lucy'传给Chat导航栏
<Button
onPress={() => navigate('Chat',{ user: 'Lucy' })}
title="Chat with Lucy"
/>
</View>
);
}
}
export const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },Chat: { screen: ChatScreen },});
- 最后不要忘了导出react组件
export default class App extends React.Component {
render() {
return <SimpleApp />;
}
}
- 如果一切顺利,效果如下
就这么简单,20分钟都不用。可是我弄了一天,踩了很多坑
- react-native版本和文档版本不一致,这是我的react-native
这是react-native中文网文档的版本,我当时没在意,一直用0.37, 错了好久,一定要选版本一致的
react-native中文网导航器的demo代码有问题,就算我的代码全copy的,还是中国红的一片,报错的忘了,没截图
执行完npm install –save react-navigation后,react-native run-android时,报错
Command 'run-android' unrecognized. Make sure...
解决办法是关掉cmd窗口,再打开,cd到项目目录下,npm install 一遍,就可以react-native run-android
- export default class App extends React.Component {} 这里要加 export default,因为App.js 是被index.js 多引用的,一定要export 出去,官网的教程是没加export default 的
其它的坑忘了截图,总之,运行成功一次来之不易,下班!