74

ReactNative学习笔记(一)之建立项目并在Android和iOS设备上运行

 5 years ago
source link: https://mundane799699.github.io/2018/08/19/react-native-note1/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

首先参考教程 React Native中文网 教程搭建开发环境, 这里我就不叙述了, 简单来说就是要安装node, react-tive, xcode, Android Studio, Android sdk以及环境变量等

创建项目

首先打开命令行进入你想创建项目的目录下面, 然后执行命令

react-native init FirstApp
3y2EnuN.png!web

这里的FirstApp是你想创建的项目的名字, 可以自己定义, 接着react-native就会初始化项目并自动去下载一些依赖, 完成之后我们打开这个项目的结构可以看到是这样的

YzEZF3q.png!web

使用命令行运行iOS工程

使用命令行运行iOS工程十分的简单, 只要进入FirstApp目录, 然后执行一句

react-native run-ios 就好了, 然后系统就会自动启动一个iOS模拟器, 将工程跑起来, 运行效果如图

yyqM3qM.png!web

按command + D能调出调试菜单

fe6Vrm6.png!web

使用Xcode运行iOS工程

使用Xcode运行iOS工程依旧十分简单, 我们进入FirstApp/ios目录, 双击FirstApp.xcodeproj文件, 这样就会用Xcode把FirstApp/ios这个项目打开

IVvieaM.png!web

然后选择一个模拟器, 点击三角形的那个运行按钮

FZfeQf6.png!web

这样就在模拟器上运行起来了, 十分的简单

qYfmUvA.png!web

使用命令行运行Android工程

运行Andorid工程总体来说要比运行iOS工程麻烦一点. 首先需要启动一个Android模拟器, 我个人习惯先打开Android Studio, 然后启动一个Android模拟器.然后也是同样的, 进入到FirstApp目录下, 执行命令 react-native run-android
UR7vIvA.png!web

按command + M能够调出调试菜单

faINBnj.png!web

双击R能够直接Reload刷新界面, 如果发现不行请在模拟器设置中将 Enable keyboard input 勾选上, 然后再双击R试试

3iUVfqI.png!web

使用Android Studio运行Android工程

使用Android Studio, File -> open, 打开FirstApp/android目录, 等待编译完成之后, 点击绿色小三角的运行按钮将工程运行起来, 但是如图所见, 使用命令行在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
IjmmmiA.png!web

一番百度之后, 参考这篇博客 react-native 最新版本爬坑经历 (unable to load script from assets 和 could not connect to development server.)

首先在main目录下创建assets目录

6nUR3y6.png!web

然后在FirstApp目录运行

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/

完成之后会发现assets目录下多了一个文件

fUvaayJ.png!web

然后再在Android Studio中运行项目, 错误消除, 项目成功运行

mYzEvmE.png!web

关于React Native的版本

在终端中运行 react-native --version 可以查看当前安装的react native的版本信息

7reM7nB.png!web

这个信息也可以在FirstApp/package.json文件中查看到

n63EZ3j.png!web

在终端中运行 npm info react-native 可以查看react native的版本信息

zQfAzeN.png!web

可以看到最新版本是0.56.0, 当前已经是最新版本

帮助:

react-native --help

升级:

react-native upgrade


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK