react-native总结

常用组件
文本



图片

网络图片（不写宽高不显示）：

本地图片：

表单

value值 onChangeText当文本发生变化
按钮

title按钮内容 color颜色 onPress回调函数
警告框

alert(标题，内容，[{text:自定义},{text:取消},{text:确定,onPress=>xxx}])
半透明点击

长列表

keyExtractor是key的抽取
numColumns行的数量
renderItem列的渲染
columuWrapperStyle行的样式指定

image.png

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'`

导航

image.png

导航容器
堆栈导航
堆栈导航页面

页面的跳转this.props.navigation
push推入堆栈
replace替换当前页面
goBack()返回
popToTop()回到顶层
参数的处理
传递参数
navigation.push("Details",{id:"abc"})
获取参数
this.props.route.params.id
配置初始化参数