共计 3885 个字符,预计需要花费 10 分钟才能阅读完成。
记录学习 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 图标上传