乐趣区

关于react-native: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 属性值接管的是数组

<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 图标上传
退出移动版