app开发-原生模式开发（六）

时间 2019-11-29

标签 app 开发原生模式繁體版

原文原文链接

React 原生模式开发环境搭建

以前咱们都是使用的沙盒模式进行开发，简述步骤就是，先安装一个Expo应用程序，而后使用扫一扫功能在Expo内运行咱们的App，偏向传统的前端开发方式。html
同时，React Native 能够采用完整的原生开发模式，将开发好的项目打包编译成一个独立 App，而后直接安装到手机上运行，偏向传统的 Native 开发方式。前端

[参照文档] reactnative.cn/docs/0.42/g…java

一、环境安装

1.一、 Yarn与React-Native-Cli

Yarn 是 Facebook 提供的替代 npm 的工具，能够加速 node 模块的下载。React Native 的命令行工具用于执行建立、初始化、更新项目、运行打包服务等任务。node

安装python

npm install -g yarn react-native-cli
 # 版本检测
yarn -v
react-native -v
复制代码

镜像配置react

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
 # 检测
yarn config get registry
yarn config get disturl
复制代码

1.二、Python2

须要注意，RN目前只支持python2.x版本，安装了3.x版本的须要更换。在安装python时，注意安装界面上的 Add Python to path选项, 勾选上会自动将Python配置到环境变量，不然须要手动配置。android

安装完毕后, 在命令行中键入 python --version 进行测试，显示出版本号即成功ios

C:\Users\Administrator>python --version
Python 2.7.16

复制代码

1.三、JDK 安装和环境变量配置

若是使用 Android 系统开发测试，那么须要安装 Java SE Development Kit (JDK) ，安装后须要手动配置环境变量。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建。环境变量配置后，须要关闭现有的命令行工具而后从新打开，新的环境变量才会生效。shell

jdk 下载地址： www.oracle.com/technetwork…npm

环境变量配置参考文档： jingyan.baidu.com/article/d45…

# 1. 建立 JAVA_HOME 环境变量，值为 jdk 的安装根路径，默认
# C:\Program Files\Java\jdk1.8.0_212
 # 2. 编辑 Path 环境变量，在 Path 中加入
# %JAVA_HOME%\bin
# %JAVA_HOME%\jre\bin
#【注意注意注意】若是是Win10一个一个添加便可
 # 3. 建立 CLASSPATH 变量, 值为
# .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
 # 4. 配置完毕后保存并退出, 而后运行下面命令进行检测
java -version
javac -version
复制代码

1.四、Android Studio

Android Studio 是谷歌推出的 Android 集成开发工具，其包含了运行和测试 React Native 应用所需的 Android SDK 和模拟器。

解压安装包

2. 进入安装的 bin 目录，点击 studio64.exe 可执行文件进行安装

4. 点击后，进入加载界面

点击取消代理设置

点击 Next 进行安装

选择自定义安装

默认，下一步

选择安装包

随后进行默认安装便可，等待下载（注意：该过程耗费的时间很长，须要注意，有可能安装不成功，多试试几回！）

安装

当成功安装后，出现以下启动界面：

在Android Studio的欢迎界面中选择Configure | SDK Manager。

SDK Platforms 配置

SDK Tools 配置

配置环境变量

经过Android Studio安装的SDK路径，须要配置到 ANDROID_HOME 环境变量中。

还能够把Android SDK的tools和platform-tools目录添加到PATH变量中，这样就能够在终端中运行一些Android工具，例如adb devices或android avd等。

1.五、adb工具

adb安装在Android-sdk路径下的platform-tools目录，这个工具是电脑与Android设备进行通讯的通用命令行工具，有几个经常使用命令须要了解，未来打包调试的时候须要保证本机的adb版本须要与模拟器的adb一致，若是不一致能够复制本机的adb.exe而后覆盖掉模拟器中的版本。

adb version # 版本
adb devices # 列出链接到本机的Android设备与状态
adb start-server # 启动adb服务
adb kill-server # 关闭adb服务

二、入门体验

启动模拟器

启动模拟器，运行adb devices命令，查看设备是否正常链接，
若是提示adb版本不符合，那么就须要把本地Android-sdk目录下的adb.ext复制到模拟器目录下的bin中，进行覆盖。而后重启模拟器进行尝试。

// 链接正常的话会显示设备信息或地址信息，如：127.0.0.1:62001 device
adb devices

// 若是没有发现设备，那么须要手动进行链接，夜神模拟器端口62001，MUMU模拟器端口7555
adb connect 127.0.0.1:7555
复制代码

建立项目

建立项目的时候，保证项目所在目录没有中文与空格，而后运行命令建立项目，建立的过程当中须要联网下载依赖包，须要耐心等待。

# 建立项目，项目名称自由定义
react-native init projectName
复制代码

启动js打包服务

在项目目录下运行 react-native run-android 命令，默认会启动一个8081端口的js打包传输服务，它的做用是向移动设备提供项目最新的打包生成的bundle.js文件，每当代码变动时，该服务就会从新打包js并推送给客户端使用。

启动服务

# 切入项目目录
cd projectName
 # 启动服务，并指定端口
react-native run-android
复制代码

服务检测

服务启动以后，咱们能够经过浏览器测试js是否能够正常获得，url以下： http://ip:8081/index.bundle?platform=android

app安装与运行

在项目目录下运行react-native run-android命令便会打包android项目, 生成apk文件, 而后自动安装到Android设备并运行。

react-native run-android
// 最后看到BUILD SUCCESSFUL提示就表明打包成功
复制代码

接下来设备会自动启动应用，若是显示以下界面就表明一切正常能够开发调试了。

三、项目目录结构和代码分析

在项目根目录下有个 index.js , 它是项目的入口文件, 负责注册根组件
根目录下有个 App.js , 是默认生成的根组件, 咱们在 APP 上看到的欢迎界面就是这个组件实现的
尝试修改 App.js 中的文本内容, 而后手机摇一摇 Reload 查看便可看到修改内容

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}> <Text style={styles.welcome}> react-native学习 </Text> <Text style={styles.instructions}> react-native学习 </Text> </View>
    );
  }
}
复制代码

根组件代码解读

// 导包
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

// Platform.select方法会根据运行环境获得配置的内容
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

// 导出根组件, 组件的定于语法与以前学习的同样
export default class App extends Component {
  render() {
    return (
      // 返回的视图须要使用View组件包裹, 做用至关于Div标签
      <View style={styles.container}>

  		{/* 文本内容使用Text组件包裹, 做用至关于P标签 */}
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>

      </View>
    );
  }
}

// 定义样式, 这里的尺寸大小无需加单位, 元素能够经过数组引用多个样式, 后面的样式优先级比前面的高
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
复制代码

四、打包正式版

4.一、产生签名的key

该过程会用到 keytool 密钥和证书管理工具(jdk 提供： C:\Program Files\Java\jdk1.8.0_212\bin\keytool.exe )，在项目的主目录中执行：

# 生成签名key，注意记下你的密钥和存储密码，后面配置文件须要使用
keytool -genkey -v -keystore my-release-key.keystore -alias 本身起的别名 -keyalg RSA -keysize 2048 -validity 10000
 # 将keystore文件移动至android/app/文件夹
move my-release-key.keystore android/app/
复制代码

4.二、修改android/gradle.properties文件，增长以下配置

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=本身起的别名
MYAPP_RELEASE_STORE_PASSWORD=存储密码
MYAPP_RELEASE_KEY_PASSWORD=密钥

复制代码

4.三、修改android/app/build.gradle文件，在文件的最末尾增长以下签名配置

android { 
  signingConfigs { 
    release { 
        storeFile file(MYAPP_RELEASE_STORE_FILE) 
        storePassword MYAPP_RELEASE_STORE_PASSWORD 
        keyAlias MYAPP_RELEASE_KEY_ALIAS 
        keyPassword MYAPP_RELEASE_KEY_PASSWORD 
    } 
  }
  buildTypes { 
    release { 
      signingConfig signingConfigs.release 
    } 
  }
}

复制代码

4.四、打包

# 在android/app/build/outputs/apk/文件夹中生产能够发布的app-release.apk文件
cd android
gradlew assembleRelease
复制代码

常见打包失败问题

参考资料 www.open-open.com/lib/view/op…
参考资料 reactnative.cn/docs/0.50/r…

没法获取桥接

提示: Could not get BatchedBridge, make sure your bundle is packaged correctly
确保 android/app/src/main/ 目录下有 assets 文件夹, 若是没有, 手动建立一个
而后在命令行工具中切入到项目根目录
执行命令: 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/

缺乏许可

Windows脚本
- mkdir "%ANDROID_HOME%\licenses"
- echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"
Linux脚本
- mkdir "$ANDROID_HOME/licenses"
- echo -e "\n8933bad161af4178b1185d1a37fbf41ea5269c55" > "$ANDROID_HOME/licenses/android-sdk-license"

链接超时

真机调试

app手动安装

打包后的 apk 安装包, 能够在项目中找到，路径为 projecrName/android/app/build/outputs/apk，这个apk安装包能够手动安装到其它模拟器或真机中进行开发调试。
若是自动安装失败, 可自行把apk文件拷贝到手机存储器, 而后手动安装。

app权限设置

app 运行时须要悬浮框权限，可在设置 => 受权管理 => 应用权限管理 中找到对应的 APP , 而后开启悬浮框权限。

链接方式

手机直连

准备一台Android手机, 经过数据线链接到电脑，设置启用USB调试
通常的手机在设置中能够直接找到开发者选项进行开启, 部分手机开启的位置可能不一样，根据须要自行百度一下
手机链接成功后运行检测命令adb devices，若是有输出设备列表与ID相关的字符串就证实链接成功了

局域网链接

移动设备除了经过 USB 直连电脑调试开发, 还能够采用无线的方式进行调试
只要保证手机和电脑在同一个局域网, 而后摇一摇唤出调试菜单
点击 Dev settings => Debuug server host , 配置本地 IP 地址和端口号 8081 便可
若是出现这个错误提示, 说明配置错了: could not connect to development server

Android环境

双击installer_r24.3.4-windows.exe安装androidSDK
进入安装目录，将android-25、android-23(react-native依赖)压缩包复制到platforms文件夹下，右键解压到当前文件夹
将platform-tools_r23.1.0-windows压缩包复制到安装目录，右键解压到当前文件夹
将 tools 压缩包复制到安装目录，右键解压到当前文件夹
在安装目录新建一个build-tools文件夹，而后将build-tools_r23.0.1-windows.zip(react-native依赖)、 build-tools_r23.0.2-windows.zip(weex依赖)和build-tools_r23.0.3-windows.zip压缩包复制到build-tools，而后依次右键解压到当前文件夹，解压后的文件夹须要修更名字为对应的版本号23.0.1、23.0.2和23.0.3
在安装目录中，新建extras文件夹，在extras文件夹下新建android文件夹将android_m2repository_r40.zip与support_r23.2.1.zip压缩包复制到这个android文件夹，右键解压到当前文件夹
配置安装环境变量：在系统环境变量中新建ANDROID_HOME变量，值为SDK安装目录，而后在Path中新增 ;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;