React Native入门

一、软件安装

Chocolatey是一个Windows上的包管理器,由于下载很慢且容易失败,可以不安装。
1、Python 2,注意目前不支持Python 3版本,可以通过Chocolatey命令行安装(choco install python2),也可以在官网下载后手动安装。
2、Node,JavaScript 运行环境,可以通过Chocolatey命令行安装(choco install nodejs.install),也可以在Node中文网下载后手动安装。
3、Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

二、Android Studio配置

React Native目前需要Android Studio2.0或更高版本,Java Development Kit [JDK] 1.8或更高版本。
安装下图红框的内容
这里写图片描述
这里写图片描述
这里写图片描述
记得配置android studio sdk环境变量

三、测试安装

新建工程文件夹myproject(不要在C盘,不要中文目录),进入工程根目录

react-native init myproject
cd myproject
react-native run-android

用android studio打开工程的android目录,运行时报错
unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
解决办法: cmd 进入项目的根目录下执行

React-native bundle –platform Android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res
然后运行

react-native run-android
这样子就可以了,此方法也可以更新index.android.js的修改,但是稍微麻烦了些。

真机调试时,修改js文件时又报错,设置Debug server host & port for device为本机ip:8081也没解决问题,React Native android could not connect to development server,用老方法删除assets下的文件重新生成可以解决问题,但是太麻烦,折腾了半天,最后发现,调试需要
命令行启动 Debug Server,调试需要命令行启动 Debug Server,调试需要命令行启动 Debug Server

react-native start

用GentMotion模拟器,F1或者Crtl+M均可调起react native开发者模式,比起摇真机调起不要太方便。

猜你喜欢

转载自blog.csdn.net/u013795543/article/details/77841801