admin 管理员组

文章数量: 887038

rn ios Android适配,rn

Simple, detailed, quick tutorial. Attach a demo.

前言

开发一款产品,通常来说你需要做三件事情:搭建开发环境 -> 写代码 + 调试 -> 打包发布。

预览

目录

搭建开发环境

按照react-native中文网-文档-搭建开发环境,选择需要的环境开始搭建。

配置开发环境需跳跃出那一道鸿沟,你懂得!推荐lantern。

增加SDK Tools (android)

增加NDK (android)

建议手动下载:

Windows:

Mac:

Android Studio (下载的ndk是最新版,不稳定,不推荐)

配置NDK环境变量 (android)

新建ANDROID_NDK_HOME,指向路径修改成你自己的存放路径,并在path中添加一遍。

设备的配置

Android

打开手机的开发者模式,打开USB调试(模拟器跳过前两句话),连接电脑成功后在终端或者cmd运行adb devices。

$ adb devices

List of devices attached

emulator-9845 offline # 模拟器

JRNJVOU899999999 device # 真实设备

注意,你只应当连接仅仅一个设备,并且当你的系统大于5.0时,运行adb reverse tcp:8081 tcp:8081。

Android 6.0及以上修改两个文件

1. 修改android/gradle/wrapper/gradle-wrapper.properties

distributionUrl=https\://services.gradle/distributions/gradle-2.2-all.zip

->

distributionUrl=https\://services.gradle/distributions/gradle-2.14.1-all.zip

2. 修改android/build.gradle

com.android.tools.build:gradle:1.2.3

->

com.android.tools.build:gradle:2.2.3

IOS

首先用Xcode打开./ios/xxxx.xcodeproj

真机调试:自行百度,开发者账号 -> 连接iphone -> 无线连接 -> iphone信任设备。

写代码 + 调试

Down

git clone .git

这样我们的代码就有啦~

Install

yarn install

Android需修改./node_modules/react-native-video/android/build.gradle中

provided 'com.facebook.react:react-native:+'

->

compile 'com.facebook.react:react-native:+'

有关其他依赖的配置方法,点击查看。

Run

react-native run-android

ios可以react-native run-ios,或者按上图的按钮。

注意:第一次运行react-native run-android到99%时会卡住,这时手机底部会出现一个提示框,询问是否安装软件,点击确定即可。ios需要在 设置 -> 通用 里信任一下。

调试

先来一波常见的错误。

No connected devices!

检查是否正确连接手机并确认USB调试是否开启。

The development server returned response error code : 500

babel-preset-react-native版本太高,建议降至babel-preset-react-native@4.0.0。

下载jar失败

遇到类似下载失败的情况,复制网址下载,放到C:\Users\zheng\AppData\Local\Android\Sdk\tools\lib文件夹里边即可。sdk位置

Could not connect to development server.

如果系统小于5.0,此时是红屏报错状态,现在你要做几件事:

首先确保你的电脑和手机设备在同一个Wi-Fi环境下。

在你的手机设置里边或者手机管家里边找到权限设置,打开悬浮窗权限。

回到红着屏的软件,摇晃设备打开开发者菜单。

点击进入Dev Settings。

点击Debug server host & port for device。

输入你电脑的IP地址和端口号(譬如192.168.10.131:8081)。在Mac上,你可以在系统设置/网络里找查询你的IP地址。在Windows上,打开cmd并输入ipconfig来查询你的IP地址。

回到开发者菜单然后选择Reload JS。

如果是模拟器,跳过1和2,按Ctrl+M或者Command+D呼出开发者菜单,执行4567。

小米手机

关闭MIUI优化,不然小米是不允许你将你的软件通过react-native run-android来安装到手机上的。

呼出开发者菜单

Android

在设置或者手机管家里找到权限设置,打开悬浮窗权限。通过摇晃手机呼出开发者菜单。

IOS

直接摇。

模拟器

按Ctrl+M或者Command+D呼出开发者菜单。

打包

Android

一:在./android/app/src/main/新建assets文件夹,将资源打进去。在根目录执行:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle --assets-dest android/app/src/main/res/

二:打包

更换设备

当你想换手机或者模拟器,并且系统不同的情况时,需要修改上文提到的两个文件,删除下边三个文件夹。

~代表项目根目录

1. ~/node_modules

2. ~/android/.gradle

3. ~/android/app/build

接着npm install -> react-native start --reset-cache->Ctrl+c杀掉->react-native run-android。

常用命令

react-native start ~~开一个本地服务器

react-native run-ios ~~运行ios工程

react-native run-android ~~运行android工程

react-native link ~~将含有原生代码的依赖连接到工程

npm install xxxx --save 或 yarn add xxxx ~~安装生产环境需要的依赖

npm install xxxx --save-dev 或 yarn add xxxx --dev ~~安装开发环境需要的依赖

npm uninstall xxxx 或 yarn remove xxxx ~~卸载某一个依赖

rimraf node_nodules ~~删除node_modules文件夹,也可以删除其他文件夹,推荐全局安装gulp-rimraf

cd android && ./gradlew assembleRelease ~~生成发行APK包

本文标签: rn ios Android适配 rn