常用组件
文本
<View>
<Text></Text>
</View>
图片
<Image>
网络图片（不写宽高不显示）：
<Image srouce={{uri="xxx"}} />
本地图片：
<Image srouce={require(xxx)} />
表单
<TextInput>
value值 onChangeText当文本发生变化
按钮
<Button>
title按钮内容 color颜色 onPress回调函数
警告框
<Alert>
alert(标题，内容，[{text:自定义},{text:取消},{text:确定,onPress=>xxx}])
半透明点击
<TouchChableOpacity>
长列表
<flatList>
keyExtractor是key的抽取
numColumns行的数量
renderItem列的渲染
columuWrapperStyle行的样式指定
react Native导航/路由
官网
https://reactnavigation.org/docs/getting-started
安装导航
npm install @react-navigation/native 原生导航
npm install @react-navigation/stack 堆栈导航
npm install @react-navigation/bottom-tabs 底部导航
npm install @react-navigation/materialtoptabs react-native tabview 顶部安卓导航
安装依赖
npm install
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context @react-native-community/
masked-view
配置
adroid/app/build.gradle dependencies 对象里面
implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation
androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'`
导航
<NavigationContainer>导航容器
<Stack.Navigator>堆栈导航
<Stack.Screen>堆栈导航页面
页面的跳转this.props.navigation
push推入堆栈
replace替换当前页面
goBack()返回
popToTop()回到顶层
参数的处理
传递参数
navigation.push("Details",{id:"abc"})
获取参数
this.props.route.params.id
配置初始化参数
<Stack.Screen initialParams={{id:1}}>
