React Native
常用快捷键
Cmd + R 刷新重载
Cmd + D debug
react-native 的 flex 默认方向是纵向的
获取设备宽度、高度、分辨率
<View>
<Text>当前设备的宽度:{
Dimensions.get('window').width}</Text>
<Text>当前设备的高度:{
Dimensions.get('window').height}</Text>
<Text>当前设备的分辨率:{
Dimensions.get('window').scale}</Text>
</View>
获取设备运行平台
android 或 ios
<View>
<Text>当前运行平台:{
Platform.OS}</Text>
</View>
常用组件
名称 | 介绍 |
---|---|
View | 类似于 div,但内部不能直接放文字,只能放容器 |
Text | 用于存放文字的容器(注意文字属性继承外部要相同的 Text 标签) |
Image | 用于展示图片(注意凡是通过 uri 加载的图片需要设置宽高) |
ImageBackground | 用于展示图片作为背景的容器(注意凡是通过 uri 加载的图片需要设置宽高) |
TextInput | 输入框组件 |
Button | 按钮组件 |
TouchableOpacity | 用于封装视图,使其可以正确响应触摸操作;当按下的时候,封装的视图的不透明度会降低 |
ScrollView | 封装了平台的 ScrollView(滚动视图)的组件(必须设置宽高:1、固定值(不建议)2、不设置 { flex: 1 } ) |
RefreshControl | 用在 ScrollView 或 FlatList 内部,为其添加下拉刷新的功能 |
FlatList | 高性能的简单列表组件 |
SectionList | 高性能的分组列表组件 |
React Navigation
安装
# 项目初始化完成后,集成 react-navigation
expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/ma