react Native组件和路由总结

常用组件

• 文本
  
  
  
• 图片
  
  网络图片（不写宽高不显示）：
  
  本地图片：
  
• 表单
  
  value值 onChangeText当文本发生变化
• 按钮
  
  title按钮内容 color颜色 onPress回调函数
• 警告框
  
  alert(标题，内容，[{text:自定义},{text:取消},{text:确定,onPress=>xxx}])
• 半透明点击
  
• 长列表
  

item.ID}
        data={this.state.movies}
        numColumns={3}   //一行显示3个
        columnWrapperStyle={styles.row} //增加下方写的样式
        renderItem={({item})=>{return(
          
            
              {item.MovieName}
          
        )}}
        />

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'
  -堆栈导航
  01.导入
  import {NavigationContainer} from '@react-navigation/native';
  // 导航容器
  import {createStackNavigator} from '@react-navigation/stack';
  // 导入创建堆栈导航方法
  02.创建
  const Stack = createStackNavigator();
  03.创建页面
  04.包装导航

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

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