react-native 和 react-navigation

学习指南
博主文章

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