ReactNative开发经验总结


React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。

目录

React Native开发环境搭建

1.node安装

下载地址:https://nodejs.org/en/
安装成功后,配置环境变量 在path中添加:
在命令窗口测试node 是否配置成功:

node -v

输出node版本即为成功

2.安装React Native

通过命令:$npm install -g react-native-cli

3.创建项目
通过命令:

react-native init MyProject(项目名称)

4.切换到自己项目
通过命令:

cd MyProject

5.安装依赖
通过命令:

npm install 

6.运行项目

ios通过命令:

react-native run-ios 

Android通过命令:

react-native run-android

react-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 模式
#endif

React 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 调试

配置说明

  1. ⚠️ 首先保证真机和 pc 在同一个局域网络下。
  2. 摇晃你的实体真机,调出配置弹窗。
  3. 团队开发可以不安装开发环境。

摇晃手机 => Configure Bundler => 设置 ip端口

iOS 设置

设置 Build ConfigurationDebug 模式连接真机打包 APP。

Xcode => Product => Scheme => Edit Scheme... => Run => Info => Build Configuration => Debug

React Native Xcode 不用数据线真机调试

通过菜单 Xcode => Product => Destination => Add Additional Simulators... 打开设置界面,勾选 Connect via network

如果是第一次操作, 可能会需要先进行配对操作;

  1. 可在以上面弹出的界面中,点击左侧的设备,然后右健选unpair device
  2. 然后再去勾选 connect via network
  3. 这时手机上会提示信任界面,点击确认即可。

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短信验证码倒计时控件

ReactNative短信验证码倒计时控件

2.ReactNative最佳轮播控件

react-native-swiper

3.ReactNative拍照/从相册获取图片控件

react-native-image-picker

4.ReactNative 打分(星星)控件

react-native-star-rating

5.ReactNative常用第三方组件汇总

常用第三方组件汇总

6.前端 uiw组件

uiw组件

7.【iOS/Android】支付宝对接支付、提现

支付宝对接支付、提现

8.复制功能组件

复制功能组件
9.导航栏切换组件

导航栏切换组件
导航栏切换组件实例

10.时间选择器组件

时间选择器组件

11.图表数据组件

图表数据组件

图表数据组件

React Native使用原生组件WebView调用pdf文件

添加依赖包,使用命令

按文档上步骤发现需要安装依赖项: 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 别名 -aliasmyProject-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变量
image
如果 Gradle 加载失败,https://gradle.org/ 点击下面按钮重新同步

3.Android 打包应用
image
如果 Gradle 加载失败,https://gradle.org/ 点击下面按钮重新同步
image

image

记得选择生成目录 <项目所在目录>/android/app/build/outputs/apk

image
然后点击finish按钮就可以了

React Native安卓打包报错笔记

打包时,报错信息如下

image
解决步骤

  • 1.找到andrroid目录,删除图中如下文件信息 ,并且重新打开 Android Studio
    image
  • 2.执行File -> Invalidate Caches / Restart -> Invalidate Caches & Restart.
  • 3、File -> Sync Project With Gradle Files

然后通过了,但是还有一个错误,错误信息如下:

image

这个错误我先不管,打包是可以成功的

ios 打包应用

ios打包笔记

准备:主要是获取项目打包的权限

第一步:
image

第二步:

image

第三步:

image

第四步:

image

开始

第一步:

image

第二步:

image

第三步:

image

然后直接Next

第五步:
image

然后直接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
添加

image

ios

在Xcode项目中把相对应的勾去掉即可

image

或者修改: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-native

2.检查当前RN版本

react-native -v

3.检查当前RN版本
初始化一个官方最小工程

 npx react-native init MyApp 

4.将除src里面的其它文件进行比对更改
(特别是 ios 和Android 两个目录尤为重要)

5.通过官方工具去检验一下

包对比


文章作者: BiLiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !
评论
  目录