React Native的实践与踩坑搭建开发环境 React Native中文网:搭建开发环境很详细，这里不再赘述了下

搭建开发环境

下面列几个注意项：

切换数据源

# 使用nrm工具切换淘宝源
npx nrm use taobao
# 切换回官方源
npx nrm use npm

修改android/build.gradle中的jcenter()和google()

`jcenter()`和`google()`分别替换为`maven { url 'https://maven.aliyun.com/repository/jcenter' }`和`maven { url 'https://maven.aliyun.com/repository/google' }`

安装时可能会存在超时，需要切换数据源，或使用翻墙软件反复安装。（祝您成功！！）

易错问题

显示内容都需要<text>内容</text>进行包裹,否则会报错

安装第三方插件时，新版本不需要自己去执行link，rn会自己autolink；若不能自动link需要手动配置的话可以按照以下步骤，例如：安装@react-native-community/art

gesture-handler报错：

npm i react-native-gesture-handler -S

async-storage报错：

npm i @react-native-async-storage/async-storage -S

若错误已经报AppRegistry错误，请关闭launchPackager.command，重新启动

打包发布：

详细文档可以查看：reactnative.cn/docs/signed… ，一下是遇到的问题进行的记录

1、生成签名秘钥：

按照React Native中文网的命令生成失败，所以在此记录一下（注：本人是在mac下）

1、查看jdk路径：/usr/libexec/java_home -V
2、cd 路径下面 /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home
3、生成签名：keytool -genkey -v -keystore (可以添加路径)文件名.keystore -alias 别名 -keyalg RSA -keysize 2048 -validity 10000

2、生成apk包时报错

Expiring Daemon because JVM heap space is exhausted
Problem in daemon expiration check
java.lang.OutOfMemoryError: GC overhead limit exceeded

修改方法：将 /android/gradle.properties文件中的org.gradle.jvmargs...这行代码打开，设置jvm

性能优化注意点

列表渲染尽量使用FlatList或SectionList
为FlatList增加getItemLayout来优化渲染速度
尽量减少渲染：类组件可以使用shouldComponentUpdate,PureComponent;函数式组件可以使用useMemo,useCallback

第三方插件

RN中不存在box-shadow,可以使用react-native-neomorph-shadows
相机扫描插件：react-native-camera
使用svg:react-native-svg-uri
RN中不存在过渡色样式，可以使用react-native-linear-gradient
引用道德地图插件：react-native-amap3d（注意：标签上一定要添加 style={StyleSheet.absoluteFill}）
录音插件：react-native-audio

react-native-audio版本较低需要进行修改：AudioRecorderManager文件

-import android.support.v4.app.ActivityCompat; -import android.support.v4.content.ContextCompat;

+import androidx.core.app.ActivityCompat; +import androidx.core.content.ContextCompat;

播放声音：react-native-sound

websocket

链接websocket时在虚拟机需要做端口转换，用到了Android调试桥(adb),

adb reverse tcp:8000 tcp:8000

// rn中使用websocket
export class Socket {
  ws!: WebSocket;
  url: string = '';
  isOpen: boolean = false;

  constructor(url: string) {
    this.url = url;
  }
  init(callback?: Function) {
    this.ws = new WebSocket(this.url);
    this.ws.onopen = () => {
      console.log('Connection to server opened');
      this.isOpen = true;
      if (callback) {
        callback();
      }
    };
    this.ws.onerror = err => {
      console.error('websocket error', err);
    };

    this.ws.onmessage = e => {
      // a message was received
      console.log('websocket message', e.data);
    };
    this.ws.onclose = e => {
      // a message was received
      this.isOpen = false;
      console.log('websocket onclose', e);
    };
  }

  sendMsg(message: string) {
    this.ws.send(message);
  }

  close() {
    this.ws.close();
  }
}

使用websocket

const WebSocketObj = new Socket(DefaultWsUrl);
WebSocketObj.init(() => {
   WebSocketObj.sendMsg('sendmsg');
});

Android应用图标尺寸大小

L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px
M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px
H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px
XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px
XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px
XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px

原文链接：blog.csdn.net/weixue9/art…

flexbox布局

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致,但也有不同

	React Native(都作用在容器属性)	Web
flexDirection	默认column	默认row （容器属性）
flex	只能指定一个数字	默认为0 1 auto（项目属性）
alignItems	容器属性	容器属性
justifyContent	容器属性	容器属性

其他属性都可以，注意：一些组合属性RN中不可以使用，需要单独配置

详解web端flex属性（是RN中常用属性）

flex属性是项目属性
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认0 1 auto。后面两个属性可选。也就是flex:1时相当于flex-grow:1。如果所有项目的flex-grow属性都是1，则它们将等分剩余空间，如果有一个flex-grow:2，其他为1则flex-grow为2的将比其他项多一倍。
该属性有两个快捷属性：auto(1 1 auto)和 none(0 0 auto)