使用react-native-0.61.5, react-navigation 4搭建一个基础项目
我是刚接触react-native,然后按照官网的脚手架搭建了项目，通过了真机调试进入了app。算是正式开始写代码了。 找资料发现react-native的页面跳转是通过reactr-navigation进行的,而网上的很多资料都是reactr-navigation3的。 然后跟着做，项目就跑不起来，浪费了很长时间。 最后从官网找了正确的使用方式。下面把步骤列一下。
创建项目
执行命令 npx react-native init xxxx
添加react-navigation依赖
yarn add react-navigation
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add react-navigation-stack @react-native-community/masked-view
今天发现一个问题
2020-02-19 发现react-navigation 的依赖有些版本更新了。然后创建的项目启动不了。 我这里把依赖的版本给固定住。可以参考下
yarn add react-navigation@4.1.1
yarn add react-native-reanimated@1.7.0 react-native-gesture-handler@1.5.6 react-native-screens@2.0.0-beta.2 react-native-safe-area-context@0.7.2 react-navigation-stack@2.1.1 @react-native-community/masked-view@0.1.6
测试成果
按照官方提供的文件，复制过来。
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
});
export default createAppContainer(AppNavigator);
然后在index.js指向这个文件
image.png
如果正常的话就可以了。启动成功。
我是用android设备测试的。如果你用ios设备或者版本和我的不一样。请参照官方文档
https://reactnavigation.org/docs/zh-Hans/4.x/hello-react-navigation.html
