React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。
目录
- 目录
- React Native开发环境搭建
- react-native获取当前运行平台
- react native Linking 调用电话、短信、邮箱功能
- React Native改机型
- React Native修改 App 在手机上展示的名称
- React Native修改 App 在手机上展示的图标
- React Native判断 Release/Debug 用于调试
- React Native开发模式弹出开发者菜单刷新应用
- React Native设置允许 HTTP 请求访问
- React Native真机配置 IP 调试
- React Native Xcode 不用数据线真机调试
- React Native 打包修改 APP 版本号
- 应用反应缓慢，出现卡顿问题
- React Native好用控件
- React Native使用原生组件WebView调用pdf文件
- React Native Android 打包应用
- React Native安卓打包报错笔记
- ios 打包应用
- ios打包笔记
- React Native开发安卓高版本 安卓Q 读写文件出错解决及方法
- React Native禁止横屏
- React Native（react-native-image-picker）拍照控件报错解决
- React Native升级教程
React Native开发环境搭建
1.node安装
下载地址：https://nodejs.org/en/
安装成功后，配置环境变量 在path中添加：
在命令窗口测试node 是否配置成功：
node -v输出node版本即为成功
2.安装React Native
通过命令：$npm install -g react-native-cli3.创建项目
通过命令：
react-native init MyProject（项目名称）4.切换到自己项目
通过命令：
cd MyProject5.安装依赖
通过命令：
npm install 6.运行项目
ios通过命令：
react-native run-ios Android通过命令：
react-native run-androidreact-native获取当前运行平台
import { Platform} from 'react-native';
{Platform.OS}
react native Linking 调用电话、短信、邮箱功能
1.打开浏览器
Linking.openURL('https://baidu.com/')
2. 打开短信功能
Linking.openURL("sms:" + 电话号码);3. 打电话功能
Linking.openURL(tel+ 电话号码);
4. 打开邮箱功能
Linking.openURL("mailto:" + 邮件地址);React Native改机型
控制指定型号即可：
react-native run-ios --simulator="iPhone X" ios控制指定型号React Native修改 App 在手机上展示的名称
Android
修改 android/app/src/main/res/values/strings.xml 配置
<resources>
<string name="app_name">这里填写名称</string>
</resources>iOS
修改 ios/<应用名称>/Info.plist 配置
<key>CFBundleDisplayName</key>
<string>这里填写名称</string>React Native修改 App 在手机上展示的图标
Android
修改替换 android/app/src/main/res/mipmap-(*) 下面的图标
图标分为 方形图标(ic_launcher.png) 和 圆形图标(ic_launcher_round.png)
iOS
修改 ios/<应用名称>/Images.xcassets/AppIcon.appiconset/Contents.json 配置，及修改配置目录 ios/<应用名称>/Images.xcassets/AppIcon.appiconset 下的图标文件。
通过 xcode 拖拽更换图标更方便。
推荐一个图标快速生成的网站
React Native判断 Release/Debug 用于调试
Android
修改 android/app/src/main/res/values/strings.xml 配置
// 在Android Studio项目中
if(BuildConfig.DEBUG){
// debug模式
}else{
// release模式
}iOS
#ifdef DEBUG
// debug模式
#else
//release 模式
#endifReact Native
if (__DEV__) {
// debug 模式
} else {
// release 模式
}React Native开发模式弹出开发者菜单刷新应用
Android
按两次 R 键或从开发者菜单(⌘M)中选择重新加载(Reload)以预览您的更改。
iOS
使用 ⌘R 让您的 IOS 模拟器重新加载本地项目，使用 ⌘T 弹出开发者菜单。
React Native设置允许 HTTP 请求访问
Android
创建配置文件 android/app/src/main/res/xml/network_security_config.xml 内容如下：
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>修改配置 android/app/src/main/AndroidManifest.xml
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
+ android:networkSecurityConfig="@xml/network_security_config"
android:theme="@style/AppTheme">
</application>iOS
修改 ios/<应用名称>/Info.plist 配置
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>React Native真机配置 IP 调试
配置说明
- ⚠️ 首先保证真机和 pc 在同一个局域网络下。
- 摇晃你的实体真机，调出配置弹窗。
- 团队开发可以不安装开发环境。
摇晃手机 => Configure Bundler => 设置 ip 和 端口
iOS 设置
设置 Build Configuration 为 Debug 模式连接真机打包 APP。
Xcode=>Product=>Scheme=>Edit Scheme...=>Run=>Info=>Build Configuration=>Debug
React Native Xcode 不用数据线真机调试
通过菜单 Xcode => Product => Destination => Add Additional Simulators... 打开设置界面，勾选 Connect via network。
如果是第一次操作， 可能会需要先进行配对操作；
- 可在以上面弹出的界面中，点击左侧的设备，然后右健选
unpair device。 - 然后再去勾选
connect via network； - 这时手机上会提示信任界面，点击确认即可。
React Native 打包修改 APP 版本号
Android
修改 android/app/build.gradle 配置
android {
.....
defaultConfig {
....
versionName "2.1.1"
}
}iOS
修改 ios/<应用名称>/Info.plist 配置
<key>CFBundleShortVersionString</key>
<string>1.2.0</string>应用反应缓慢，出现卡顿问题
可能存在的问题
- 查看是否 console 日志打印过度造成。
- React Native Debugger 页面放到最前面，浏览器窗口不要放到选项卡里面。
React Native好用控件
1.ReactNative短信验证码倒计时控件
2.ReactNative最佳轮播控件
3.ReactNative拍照／从相册获取图片控件
4.ReactNative 打分（星星）控件
5.ReactNative常用第三方组件汇总
6.前端 uiw组件
7.【iOS/Android】支付宝对接支付、提现
8.复制功能组件
复制功能组件
9.导航栏切换组件
10.时间选择器组件
11.图表数据组件
React Native使用原生组件WebView调用pdf文件
- 官方文档：
(https://reactnative.cn/docs/webview#startinloadingstate) - 参考文档：
(https://www.jianshu.com/p/d4fa88cc3b3d)
添加依赖包，使用命令
按文档上步骤发现需要安装依赖项: react-native-webview及react-native-get-random-values
yarn add react-native-webview
yarn add react-native-get-random-values引用文件
import 'react-native-get-random-values';
import { WebView } from "react-native-webview"以下是源代码参考
render() {
const { listDetail, selectRouteList } = this.props;
return (
<SafeAreaView style={{ flex: 1 }}>
<WebView
ref={(webView) => (this.webView = webView)}
startInLoadingState={true}
source={{
uri: `${url}`,
}}
></WebView>
</SafeAreaView>
);
}React Native Android 打包应用
1.生成上传需要的秘钥
官方教程 https://reactnative.dev/docs/signed-apk-android/
Android要求所有应用都必须先使用证书进行数字签名，然后才能安装。 为了通过Google Play商店分发您的Android应用，需要使用发布密钥对其进行签名，然后再将其用于以后的所有更新。 自2017年以来，借助Google Play的应用签名功能，Google Play可以自动管理签名发布。 但是，在将应用程序二进制文件上传到Google Play之前，需要使用上传密钥对其进行签名。 Android Developers文档上的“签署应用程序”页面详细描述了该主题。 本指南简要介绍了该过程，并列出了打包JavaScript捆绑包所需的步骤。
生成上传需要的秘钥
Android要求所有应用都有一个数字签名才会被允许安装在用户手机上，Android开发者官网上的如何给你的 应用签名文档 描述了签名的细节
生成签名有两种方式：
- Keytool命令行
- Android Studio界面生成
您可以使用keytool生成专用签名密钥。 在Windows上，必须从 C:\Program Files\Java\jdkx.x.x_x\bin 运行keytool。
⚠️ 注意这个秘钥是私有的，请不要上传
$ keytool -genkeypair -v -keystore myProject-upload-key.keystore -alias myProject-key-alias -keyalg RSA -keysize 2048 -validity 10000⚠️ 生成打包用的 key，将 keystore 命名为 myProject-release-key.keystore 别名 -alias 为 myProject-key-alias
⚠️ 记住要输入的 输入密钥库口令:
# 老命令
keytool -genkey -v -keystore myProject-release-key.keystore -alias myProject-key-alias -keyalg RSA -keysize 2048 -validity 10000
# 官方新命令
keytool -genkeypair -v -keystore myProject-release-key.keystore -alias myProject-key-alias -keyalg RSA -keysize 2048 -validity 10000
# 输入密钥库口令: myProject2020
# 再次输入新口令:
# 您的名字与姓氏是什么?
# [Unknown]: Kenny Wong//根据实际情况
# 您的组织单位名称是什么?
# [Unknown]: junzhuo//根据实际情况
# 您的组织名称是什么?
# [Unknown]: junzhuo//根据实际情况
# 您所在的城市或区域名称是什么?
# [Unknown]: shanghai//根据实际情况
# 您所在的省/市/自治区名称是什么?
# [Unknown]: shanghai//根据实际情况
# 该单位的双字母国家/地区代码是什么?
# [Unknown]: zh//根据实际情况
# CN=Kenny Wong, OU=junzhuo, O=junzhuo, L=shanghai, ST=shanghai, C=zh是否正确?
# [否]: y
#
# 正在为以下对象生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 10,000 天):
# CN=Kenny Wong, OU=junzhuo, O=junzhuo, L=shanghai, ST=shanghai, C=zh
# 输入 的密钥口令
# (如果和密钥库口令相同, 按回车):
# [正在存储myProject-upload-key.keystore]
#
# 这是一个巨坑 不要迁移标准格式，否则打包错误
# Warning:
# JKS 密钥库使用专用格式。建议使用 "keytool -importkeystore -srckeystore myProject-upload-key.keystore -destkeystore myProject-upload-key.keystore -deststoretype pkcs12" 迁移到行业标准格式 PKCS12。 ⚠️⚠️⚠️ 下面这是一个巨坑 不要迁移标准格式，否则打包错误，上面生成命令会提示下面命令，如果你照做了，坑可能爬不出来
# Warning:
# JKS 密钥库使用专用格式。建议使用 "
keytool -importkeystore -srckeystore myProject-upload-key.keystore -destkeystore myProject-upload-key.keystore -deststoretype pkcs12
# " 迁移到行业标准格式 PKCS12。2.设置Gradle变量
如果 Gradle 加载失败，https://gradle.org/ 点击下面按钮重新同步
3.Android 打包应用
如果 Gradle 加载失败，https://gradle.org/ 点击下面按钮重新同步
记得选择生成目录 <项目所在目录>/android/app/build/outputs/apk
然后点击finish按钮就可以了
React Native安卓打包报错笔记
打包时，报错信息如下
解决步骤
- 1.找到andrroid目录，删除图中如下文件信息 ，并且重新打开 Android Studio
- 2.执行File -> Invalidate Caches / Restart -> Invalidate Caches & Restart.
- 3、File -> Sync Project With Gradle Files
然后通过了，但是还有一个错误，错误信息如下：
这个错误我先不管，打包是可以成功的
ios 打包应用
ios打包笔记
准备：主要是获取项目打包的权限
第一步：
第二步：
第三步：
第四步：
开始
第一步：
第二步：
第三步：
然后直接Next
第五步：
然后直接export即可
React Native开发安卓高版本 安卓Q 读写文件出错解决及方法
Android Q 默认开启沙箱模式 导致出现文件读写失败
需要在使用动态权限申请的情况下在AndroidManifest.xml中加入
android:requestLegacyExternalStorage="true"AndroidManifest.xml文件内容
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.sdcard">
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:requestLegacyExternalStorage="true"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
React Native禁止横屏
android端
android文件下app/src/main/AndroidManifest.xml
添加
ios
在Xcode项目中把相对应的勾去掉即可
或者修改：ios/项目名称/Info.plist
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
+ <string>UIInterfaceOrientationLandscapeLeft</string>
+ <string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>React Native（react-native-image-picker）拍照控件报错解决
react-native-image-picker控件照片选择 gif 导致程序报错问题解决的
参考网站
React Native升级教程
React Native在已有项目下升级
1.查看当前RN最新版本：
npm info react-native2.检查当前RN版本
react-native -v 3.检查当前RN版本
初始化一个官方最小工程
npx react-native init MyApp 4.将除src里面的其它文件进行比对更改
(特别是 ios 和Android 两个目录尤为重要)
5.通过官方工具去检验一下
