常用組件

• 文本
  <View>
  <Text></Text>
  </View>
• 圖片
  <Image>
  網(wǎng)絡(luò)圖片（不寫寬高不顯示）：
  <Image srouce={{uri="xxx"}} />
  本地圖片：
  <Image srouce={require(xxx)} />
• 表單
  <TextInput>
  value值 onChangeText當文本發(fā)生變化
• 按鈕
  <Button>
  title按鈕內(nèi)容 color顏色 onPress回調(diào)函數(shù)
• 警告框
  <Alert>
  alert(標題惑畴，內(nèi)容奠涌，[{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行的數(shù)量
renderItem列的渲染
columuWrapperStyle行的樣式指定

react Native導(dǎo)航/路由

• 官網(wǎng)
  https://reactnavigation.org/docs/getting-started
• 安裝導(dǎo)航
  npm install @react-navigation/native 原生導(dǎo)航
  npm install @react-navigation/stack 堆棧導(dǎo)航
  npm install @react-navigation/bottom-tabs 底部導(dǎo)航
  npm install @react-navigation/materialtoptabs react-native tabview 頂部安卓導(dǎo)航
• 安裝依賴
  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'
  -堆棧導(dǎo)航
  01.導(dǎo)入
  import {NavigationContainer} from '@react-navigation/native';
  // 導(dǎo)航容器
  import {createStackNavigator} from '@react-navigation/stack';
  // 導(dǎo)入創(chuàng)建堆棧導(dǎo)航方法
  02.創(chuàng)建
  const Stack = createStackNavigator();
  03.創(chuàng)建頁面
  04.包裝導(dǎo)航

<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>導(dǎo)航容器
<Stack.Navigator>堆棧導(dǎo)航
<Stack.Screen>堆棧導(dǎo)航頁面

• 頁面的跳轉(zhuǎn)this.props.navigation
push推入堆棧
  replace替換當前頁面
  goBack()返回
  popToTop()回到頂層
• 參數(shù)的處理
  傳遞參數(shù)
  navigation.push("Details",{id:"abc"})
  獲取參數(shù)
  this.props.route.params.id
  配置初始化參數(shù)
  <Stack.Screen initialParams={{id:1}}>