乐趣区

关于react-native:ReactNative使用总结

jiezi

记录学习 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 属性值接管的是数组

<View
  style={
    {transform: [{ scaleY: 2}],
    },
  }
>
  <Text>ScaleY by 2</Text>
</View>

View

View 是一个反对 Flexbox 布局、款式、触摸响应、和一些无障碍性能的容器。

  • 不反对设置字体款式
  • 不能间接绑定点击事件（应用TouchableOpacity）

Text

一个用于显示文本的 React 组件，并且它也反对嵌套、款式，以及触摸解决。

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

Image

更换 APP 图标

能够用工具批量生成，当初须要一张 1024*1024 的母版即可。
图标生成工具

  • IOS

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

  • Android

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

启动页

待补充

调试

  • reactnative 调试

路由

入门先间接看中文即可

  • reactnavigation 中文网

文本输出

TextInput

<TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={text => 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 图标上传
退出移动版