美文网首页
搭建一个项目(recat-native-0.61.5)

搭建一个项目(recat-native-0.61.5)

作者: asfafjwefhfuer | 来源:发表于2020-02-11 18:41 被阅读0次

使用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

相关文章

网友评论

      本文标题:搭建一个项目(recat-native-0.61.5)

      本文链接:https://www.haomeiwen.com/subject/zsoaxhtx.html