react-native上手篇

时间:2023-03-08 20:51:03
react-native上手篇

根据公司发展,后期可能要做APP开发,所以了解一下react-native。之前工作用过react,所以想想应该不会太难。(结果配置环境和demo就搞了一天!)

1,搭建环境

官网地址

1,Node( 版本大于8.3)

2,Python2.x( 不支持3.x,我本地装的3.7,下载一个2.7,改一下环境变量就好)

react-native上手篇

3,Java SE Development Kit (JDK)---JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)

安装教程,网上一大堆,找适合你,主要是一个jre和jdk,配置好环境变量。

react-native上手篇

react-native上手篇

注意:官网不建议使用cnpm,我只好换回npm镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4,安装Yarn、React Native 的命令行工具(react-native-cli)(网上的脚手架很多选择适合自己的。我用的官网推荐的)

npm install -g yarn react-native-cli
安装完 yarn 后同理也要设置镜像源: yarn config set registry https://registry.npm.taobao.org --globa
yarn config set disturl https://npm.taobao.org/dist --globa

在这块遇到点坑全局安装遇到问题,c盘写权限问题解决方案点这里

到这里走完了环境搭好了一半。

2,Android 开发环境 安装 Android Studio(很多下载需要*,选一个稳定的)

下载地址

安装方法(网上很多)

注意:要配置环境变量,SDK 要选Android 9 (Pie)

react-native上手篇

react-native上手篇

装完需要运行一个简单的Demo,将手机开发者模式打开,允许usb调试。

react-native上手篇

手机就会安装一个app

react-native上手篇

到这一步环境就完成了。可以开心的玩react-native

3,react-native小试牛刀

创建项目

react-native init myapp

进入项目运行

react-native run-android

运行后会报这个问题。暂时不用管它,只是告诉你没有设备连接,后面我用 adb链接模拟器就好了

react-native上手篇

我暂时没有用模拟器,想看看在手机上是什么样,用

Android Studio打开项目的android文件,用上面运行demo同样的方法。

react-native上手篇

问题来了报了一个错,意思是说项目的包构建工具版本和SDK包构建工具版本不一致

react-native上手篇

解决办法:找项目构建工具版本改成和SDK构建版本一样就好

react-native上手篇

本来以为就好了,到手机上又红屏了。

react-native上手篇

解决React Native unable to load script from assets index.android.bundle on windows

原因没有找到assets下文件,需要手动创建并设置

1.手动在main下建立一个assets文件夹

react-native上手篇

2,然后cmd 进入项目的根目录下执行:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3,在执行 react-native run-android在来一次就好了。

最终在手机跑起来了开心。

4,下面说说在react-native在模拟器运行遇到的坑

1,下载夜神模拟器。

2,设置一下要模拟手机的型号,减低配置。

3,模拟器打开开发者模式(找到版本号点5下就好)

react-native上手篇

4,打开cmd窗口输入adb,如果没有用,需要配置一下环境变量。(adb工具即Android Debug Bridge(安卓调试桥) tools。它就是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互。在某些特殊的情况下进入不了系统,adb就派上用场啦!)

那本地的adb在哪?在Android-SDK\platform-tools

react-native上手篇

react-native上手篇

react-native上手篇

配置好,在关掉cmd,重新打开,输入adb

react-native上手篇

出现版本就成功。记住你的版本号。

右键夜神模拟器的文件所在位置。有nox-adb.exe文件,当前文件打开cmd输入nox_adb.exe注意查看版本号和上面的版本号是否一致,如果不一致,连接会失败。如果不一致怎么办?将SDK中的adb.exe复制一份重命名为nox_adb.exe替换即可;

react-native上手篇

react-native上手篇

版本号一致后,cmd中执行

adb connect 127.0.0.1:62001

adb devices

连接好了,在项目中再执行react-native run-android(注意手机不要连着电脑)这样模拟器中装成功了

react-native上手篇

react-native上手篇                             react-native上手篇

可以开始入坑了。

react-native上手篇

总结一下:

1,入门就很多坑,但万事开头难;

2,环境变量配置一定,一定不要配错,前面每一步要走的仔细小心;

3,不要放过每一个报错,都会导致项目跑不起。细节决定成败。