常用组件
- 文本
<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.gradledependencies对象里面
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}}>
