react Native组件和路由总结

常用组件

• 文本
  <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>

<FlatList
        keyExtractor={item=>item.ID}
        data={this.state.movies}
        numColumns={3}   //一行显示3个
        columnWrapperStyle={styles.row} //增加下方写的样式
        renderItem={({item})=>{return(
          <View style={{marginTop:20}} key={item.ID}>
            <Image 
              style={{width:135,height:160}} 
              source={{uri:item.defaultImage}}></Image>
              <Text style={{marginTop:5,textAlign:"center"}}>{item.MovieName}</Text>
          </View>
        )}}
        />

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.包装导航

<NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" 
          component={Home} 
          options={{title:"首页"}}/>
          <Stack.Screen name="Details" 
          component={Details} 
          initialParams={{id:1}}
          options={{title:"详情页"}}/>
        </Stack.Navigator>
      </NavigationContainer>

<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}}>