React Native+react-navigation环境配置遇到的坑萌新入坑

因为涉及到的项目需要开发个手持设备的几个功能，目前花了一周配置好这两个环境，安卓真机器无法被识别到哈哈，
是用ws+as的虚拟机在开发，期间遇到很多不可思议的颠覆性的问题？操作？‘
大佬不用看了。。。。。。。
React Native配置Po在这里在这里插入图片描述
然后就是安装as，这里不建议使用as，很多前端都不提示，而且很多时候回给你错误的推荐，一点项目就完蛋！！！
推荐ws进行开发！！！！
没有as的可以去https://reactnative.cn/docs/getting-started/这里看怎么安装配置环境变量
安装好了，现在先int项目 react-native init MyApp （项目名字）
你可以使用–version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。我的版本是0.60.0
推荐安卓真机，启动命令：cd AwesomeProject react-native run-android

如果接下来程序运行无误，显示了React图片跟其他的英文，就是天胡开局（我自己整了好几天！！各种问题！！）
接续配置react-navigation（这是react-native搭配的跳转以及抽屉等）

1、先安装在React Native 项目中安装react-navigation这个包
yarn add react-navigation

2、然后，安装 react-native-gesture-handler。如果你用Expo managed workflow,那可以省略这一步
yarn add react-native-gesture-handler

3、坑来了哈，让你react-native版本>=0.60 不用link包，但是你大于0.60版本的不link库还是白瞎
react-native link
直接输入这个命令，是依赖所有库，如果你接下来使用Ant Design Mobile RN的话，安装完毕
yarn add @ant-design/react-nati
会让你链接字体图标还是需要这个命令
不过一般安完React Native 你就会出现各种各样的错误，哪怕上传到git 重新拉下来项目也会出错
我下载了好几个demo都没成功过。。。

反正我能运行成功是init了无数项目。。
期间遇到了–no-jetifier错误，是上一次init的项目能使用，下一次init的就出现这个错误，要把这个东西加在启动命令之后才可运行。
我反正用了一周，我想看看有没有比我更长的。。。。。。。。。。
如果配置好了这两个RN 实例送给你

import React from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import {  StyleSheet,View, Text,Button,Image,TouchableHighlight} from 'react-native';
import Storage from "./Storage";
import Outbound from "./Outbound";
import Maintain from "./Maintain";
import ReportedStopping from "./ReportedStopping";
class HomeScreen extends React.Component {


    render() {
        return (
         <View style={
   
   { flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text >HomeScreen</Text>
                <Button
                    title="去下一页"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
                <Button
                    title="点击刷新"
                    onPress={() => this.props.navigation.push('Home')}
                />
            </View>
        );
    }
}

});

 /*下面几行代码才是实现连接跳转的关键，只需要注册即可实现跳转*/
const AppNavigator = createStackNavigator({
    Home: HomeScreen,
    Details: DetailsScreen,
},{
    initialRouteName: "Home"
});
const AppContainer = createAppContainer(AppNavigator);
export  default  AppContainer;
 /* 可以写在一起，也可分开写*/
class DetailsScreen extends React.Component {
    render() {
        return (
            <View style={
   
   { flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text >Details Screen</Text>
                <Button
                    title="去主页"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
                <Button
                    title="点击刷新"
                    onPress={() => this.props.navigation.push('Details')}
                />
            </View>
        );
    }
}

Po上我的packge.json

{
  "name": "reactApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/react-native": "^3.1.10",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-navigation": "^3.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

谢谢大家的观看，有问题请留言。或者加我wx16653144918
在这里插入图片描述

React Native+react-navigation环境配置遇到的坑 萌新入坑

猜你喜欢

React Native+react-navigation环境配置遇到的坑萌新入坑