React Native HelloWorld for mac

前端之家收集整理的这篇文章主要介绍了React Native HelloWorld for mac前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

从六点下班,搭建RN环境,到iOS和Android项目的Hello World出现,已经四个小时过去了。

简单记录一下步骤,网上教学资料一大堆,我就不再来一遍了,我只是把我的步骤和遇到的问题记录一下。方便以后查看。

首先去中文官网看:http://www.reactnative100.com/docs/getting-started.html

1.先去这里:http://brew.sh/ 安装Homebrew


2.安装后在终端,通过安装的Homebrew安装node,和watchman:

brew install node

brew install watchman


3.因为总会出现权限问题,所以安装rn命令行工具的时候我直接输入的:

sudo npm install -g react-native-cli


4.基本工具和环境好了,Android和iOS环境我已经配置好了。这步骤略。。。

5.下面开始初始化工程了。这里遇到问题了,有时候会拉不下来工程,所以直接换成淘宝的国内镜像:

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

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


6.创建工程:

react-native init “工程名字”


7.这时候创建工程失败了,可以尝试升级你的npm,因为我的npm是去年安装的,所以升级过后工程创建就成功了。

sudo npm update npm -g

升级过后重新创建:react-native init “工程名字”


8.创建后就可以使用xcode和Android Studio分别打开对应平台的项目了。可以直接运行到手机上了。

也可以使用命令来打包运行。

这里有个问题,ios运行没问题。当我运行在android手机上时,红屏,显示could not get BatchedBridge

最后找到解决办法:

1).在工程目录下最外层有个package.json文件。打开后,在"scripts"中添加

"bundle-android":"react-native bundle --platform android --dev false --entry-file index.android.js

--bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output

android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"

2).在android项目目录结构中新建assets文件夹,有就不用建了。

3).在终端运行: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/

运行过后去assets目录下看看,多了两个文件,这步的作用是将工程android.js编译到android工程下的assets文件下。

这时在运行到手机上,Hello World就出来了。

原文链接:https://www.f2er.com/react/305048.html

猜你在找的React相关文章