搭建使用create-react-native-app 搭建app开发环境

发布时间:2019-06-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了搭建使用create-react-native-app 搭建app开发环境脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

create-react-native-app

文档地址

react-native

expo 官网

expo 文档

两种创建react-natvie-app的方法

  1. react-native inIT PRojectName
  2. create-react-native-app project app

环境配置比较:第一种方法要求的开发环境比较繁杂,需要 node / watchman / jdk / android sdk,android studio / xcode 等等。第二种可以摆脱andROId studio 和 xcode ,只要在手机上安装expo client就可以开发, 当然你也可以在android studio 和 xcode 查看项目效果

打包比较:第一种打包需要依懒android studio 和 xcode , 配置繁琐。 第二种只需要 配置 app.JSON 然后运行 exp build:android 或 exp build:ios 就可以打包了

how to use create-react-native-app

npm install -g create-react-native-app

create-react-native-app appName

cd appName

npm start

在移动设备上查看你的项目,需要移动设备和脑在同一网段内

运行npm start 后会出现

搭建使用create-react-native-app 搭建app开发环境

  1. a 在安卓模拟设备打开项目(此处需要自己手动打开安卓模拟器,然后项目才会运行在模拟器上 ,此情况出现在mac设备上)
  2. i 在ios模拟设备上打开项目(在mac上加入安卓有xode 此命令可直接启动ios模拟器)
  3. s 要求输入邮箱或者手机号 会收到含有url的邮件或者短信 ,通过url 可以打开 expo client 查看你的项目 ,建议输入手机号 格式 +8613888888888 ,此方式用于ios设备
  4. q 显示二维码 android 可以通过expo client扫描二维码 查看你的项目
  5. r 重新打包 R 重新打包并清除缓存
  6. d 切换开发模式

项目结构

搭建使用create-react-native-app 搭建app开发环境

  1. client 是后来加的,放js文件的地方
  2. 这里没有android 和 ios 文件夹 ,有别于上文提到的第一种创建项目的方法

打apk包

npm install -g exp 
exp login   (此处需要在expo官网注册账号,然后登录)

配置app.json
{
   "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "your-app-slug", 
    "sdkVersion": "XX.0.0",
    "ios": {
      "bundleidentifier": "com.yourcompany.yourappname"
    },
    "android": {
      "package": "com.yourcompany.yourappname"
    }
   }
 }
exp build:android 

打包完成后 登录expo官网 点击头像-点击View IPA/APK builds 就可以看到 点击下载就可以了

脚本宝典总结

以上是脚本宝典为你收集整理的搭建使用create-react-native-app 搭建app开发环境全部内容,希望文章能够帮你解决搭建使用create-react-native-app 搭建app开发环境所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。