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

NoraXie 发布于2019-08-23 10:25 / 3432人阅读

摘要：文档地址官网文档两种创建的方法环境配置比较第一种方法要求的开发环境比较繁杂，需要等等。第二种可以摆脱和，只要在手机上安装就可以开发当然你也可以在和查看项目效果打包比较第一种打包需要依懒和配置繁琐。

create-react-native-app 文档地址

react-native

expo 官网

expo 文档

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

react-native init projectName

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 后会出现

a 在安卓模拟设备打开项目（此处需要自己手动打开安卓模拟器，然后项目才会运行在模拟器上，此情况出现在mac设备上）

i 在ios模拟设备上打开项目（在mac上加入安卓有xode 此命令可直接启动ios模拟器）

s 要求输入邮箱或者手机号会收到含有url的邮件或者短信，通过url 可以打开 expo client 查看你的项目，建议输入手机号格式 +8613888888888 ，此方式用于ios设备

q 显示二维码 android 可以通过expo client扫描二维码查看你的项目

r 重新打包 R 重新打包并清除缓存

d 切换开发模式

项目结构

client 是后来加的,放js文件的地方

这里没有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 就可以看到点击下载就可以了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96326.html

初次接触ReactNative，搭建环境、调试时遇到的报错们及解决方法

摘要：初次搭建总会碰上各种报错以及红黄屏报错如果尚未搭建环境，请转至官网搭建红屏是程序无法正常运行，黄屏是程序可以运行但是可能存在一些潜在问题首次使用命令行工具来创建一个名为的新项目后运行后会报错，如图解决方法到你的已有项目中复制一份文件到初次搭建ReactNative总会碰上各种报错以及红黄屏报错如果尚未搭建环境，请转至官网搭建https://reactnative.cn/docs/g....

elliott_hu 2019-08-23 12:25 评论0 收藏0
从 1 到完美，用 js 和 react-native 写一个 APP

摘要：从到完美，用和写一个在年开源了后，紧接着在年就又开源了，就此打开了用和前端技术写原生之路。对应来看，程序只有两个部分，和，而部分则分为组件和。所以，在端的纯库无在中同样适用，如等。应用实例便是使用开发的一个日记。从 1 到完美，用 js 和 react-native 写一个 APP facebook 在 2013 年开源了 react 后，紧接着在 2015 年就又开源了 react...

CollinPeng 2019-08-23 11:45 评论0 收藏0
前端项目创建

摘要：原文地址创建项目方法一首先全局安装使用命令行工具来创建一个名为的新项目提示你可以使用参数注意是两个杠创建指定版本的项目。 1、利用dva-cli创建react项目 1，首先全局安装dva-cli，大家可以自行选择项目目录。 $ npm install -g dva-cli 2，接着使用dva-cli创建我们的项目文件夹 $ dva new myapp 3，进入myapp目录，安装依...

Simon_Zhou 2019-08-23 11:37 评论0 收藏0
react-native 入门基础介绍

摘要：一个简单的，用于介绍相关基础信息，主要是针对有兴趣的同学参考以下内容及代码在测试有效。本文不介绍安装模拟器的开发方式，需要的请自行。路由组件使用组件使用入口首页使用侧滑路由组件，默认显示路由为对象的第一个属性值。 [toc] 一个简单的demo，用于介绍react-native相关基础信息，主要是针对有兴趣的同学参考；以下内容及代码在2018-08测试有效。完整项目代码：https:/...

andycall 2019-08-23 12:21 评论0 收藏0