【ReactNative】使用总结

记录学习 RN 的文档，比较随意

搭建开发环境

基本上按照官网的文档一步步来即可，注意需要科学上网

• 搭建开发环境

请不要使用一些移植的终端环境，例如 git bash 或 mingw 等等，这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行（CMD 或 powershell）运行。

创建项目

npx react-native init AwesomeProject --version X.XX.X

version 指定版本 0.67.4 版本需要 JDK1.8

0.68 以后版本需要 JDK11

手机投屏工具

• scrcpy

手机投屏工具，方便直接在电脑观看效果，缺点是需要数据线连接

Flex

• 所有的容器默认布局都是 Flex
• flex-direction: column(默认)
• RN 中样式无法继承, (补充： React Native 实际上还是有一部分样式继承的实现，不过仅限于文本标签的子树。)

单位

• 数值, 单位是dp,无法使用 px,vw,vh 等
• 百分比
• PPI（DPI）大多数状况下这两种是相等的，即 PPI ＝ DPI。PPI 是屏幕像素与设备的比值：PPI ＝屏幕对角线像素点／屏幕对角线物理宽度。
• DPI（dots per inch）打印精度 （每英寸所能打印的点数）字体
• dp（dip）（Density-independent pixels）一种基于屏幕密度的抽象单位。在每英寸 160 点的显示器上，1dp = 1px。特别须要注意 dp 是相对长度单位，简单的说 1dp 在不一样的屏幕或者不一样的 ppi 下展现出来的“物理长度”可能不一致。
• px 像素点。也是相对长度
• in（inch）英寸。物理长度

Transform

transform 属性值接收的是数组

  ScaleY by 2

View

View 是一个支持 Flexbox 布局、样式、触摸响应、和一些无障碍功能的容器。

• 不支持设置字体样式
• 不能直接绑定点击事件（使用TouchableOpacity）

Text

一个用于显示文本的 React 组件，并且它也支持嵌套、样式，以及触摸处理。

注意： 元素在布局上不同于其它组件：在 Text 内部的元素不再使用 flexbox 布局，而是采用文本布局。这意味着内部的元素不再是一个个矩形，而可能会在行末进行折叠。

Image

更换APP图标

可以用工具批量生成，现在需要一张1024*1024的母版即可。
图标生成工具

• IOS

把下载好的IOS图标拖到Imagees.xcassets / AppIcon文件夹中，xcode会自动根据图片的大小匹配图标，如果有些图标出现黄色的警告，删掉即可.

• Android

在/android/app/src/main/res 目录下 一堆mipmap目录，替换掉以下相应目录中的ic_launcher.png就可以

启动页

待补充

调试

• reactnative 调试

路由

入门先直接看中文即可

• reactnavigation 中文网

文本输入

TextInput

 setText(text)}
        defaultValue={text}
      />

滚动视图

长列表

特定平台

• 使用 Platform 模块.

import { Platform, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  height: Platform.OS === "ios" ? 200 : 100,
});

Platform.OS 在 iOS 上会返回 ios，而在 Android 设备或模拟器上则会返回 android。

• 使用特定平台扩展名.

ScrollView适合用来显示数量不多的滚动元素。放置在 ScrollView 中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的FlatList组件。

ActivityIndicator

显示一个圆形的 loading 提示符号。

Button

FastList

Image

默认情况下 Android 是不支持 GIF 和 WebP 格式的

KeyboardAvoidingView

本组件用于解决一个常见的尴尬问题：手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的高度，调整自身的 height 或底部的 padding，以避免被遮挡。

Modal

PermissionsAndroid

PermissionsAndroid

PermissionsAndroid 可以访问 Android M(也就是 6.0)开始提供的权限模型。有一些权限写在AndroidManifest.xml就可以在安装时自动获得，但有一些“危险”的权限则需要弹出提示框供用户选择。本 API 即用于后一种情形。

在低于 Android 6.0 的设备上，权限只要写在AndroidManifest.xml里就会自动获得，此情形下check会始终返回true和而request方法将始终解析为PermissionsAndroid.RESULTS.GRANTED。

需要用户提示的权限:

• READ_CALENDAR: 'android.permission.READ_CALENDAR'
• WRITE_CALENDAR: 'android.permission.WRITE_CALENDAR'
• CAMERA: 'android.permission.CAMERA'
• READ_CONTACTS: 'android.permission.READ_CONTACTS'
• WRITE_CONTACTS: 'android.permission.WRITE_CONTACTS'
• GET_ACCOUNTS: 'android.permission.GET_ACCOUNTS'
• ACCESS_BACKGROUND_LOCATION: 'android.permission.ACCESS_BACKGROUND_LOCATION`
• ACCESS_FINE_LOCATION: 'android.permission.ACCESS_FINE_LOCATION'
• ACCESS_COARSE_LOCATION: 'android.permission.ACCESS_COARSE_LOCATION'
• RECORD_AUDIO: 'android.permission.RECORD_AUDIO'
• READ_PHONE_STATE: 'android.permission.READ_PHONE_STATE'
• CALL_PHONE: 'android.permission.CALL_PHONE'
• READ_CALL_LOG: 'android.permission.READ_CALL_LOG'
• WRITE_CALL_LOG: 'android.permission.WRITE_CALL_LOG'
• ADD_VOICEMAIL: 'com.android.voicemail.permission.ADD_VOICEMAIL'
• USE_SIP: 'android.permission.USE_SIP'
• PROCESS_OUTGOING_CALLS: 'android.permission.PROCESS_OUTGOING_CALLS'
• BODY_SENSORS: 'android.permission.BODY_SENSORS'
• SEND_SMS: 'android.permission.SEND_SMS'
• RECEIVE_SMS: 'android.permission.RECEIVE_SMS'
• READ_SMS: 'android.permission.READ_SMS'
• RECEIVE_WAP_PUSH: 'android.permission.RECEIVE_WAP_PUSH'
• RECEIVE_MMS: 'android.permission.RECEIVE_MMS'
• READ_EXTERNAL_STORAGE: 'android.permission.READ_EXTERNAL_STORAGE'
• WRITE_EXTERNAL_STORAGE: 'android.permission.WRITE_EXTERNAL_STORAGE'

Android 常用权限和使用说明

Geolocation

{
  "coords": {
    "accuracy": 40,
    "altitude": 0,
    "altitudeAccuracy": 0,
    "heading": 0,
    "latitude": 23.181484,
    "longitude": 113.448776,
    "speed": 0
  },
  "mocked": false,
  "provider": "network",
  "timestamp": 1649444050101
}

• react-native 中的 iOS 上的位置权限不起作用

ReactNative 动画

import { UIManager } from "react-native";

if (UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

应该写在任何组件加载之前，比如可以写到 index.js 的开头。

参考文章

• ReactNative 系列文章
• RN：app图标上传