RN的基础组件
文本 View Text
图片
网络图片
步写宽高是不显示的。
<Image srouce={{uri=xxxx}}/>
本地图片
<Image source={require(xxxx)}>
表单
<TextInput>
value
值
onChangeText
当文本发生改变
警告框
<Alert>
alert(标题，内容，[{text:自定义},{text:"取消"},{text:确定，onPress=>xxx}])
半透明点击
<TouchableOpacity>
flatlist
data 数据
renderItem={({item})=><View><Text>{item.MovieName}</Text></View>}
渲染
numColumns={3} 一行显示的个数
columnWrapperStyle 行样式
refreshing={this.state.refreshing}
onRefresh={()=>this.getMovies()}
onEndReached={()=>this.getMovies(2)}
RN css
单位
默认pt
没有百分比
布局
默认 flex弹性布局
方向默认垂直
使用
style={{width:200}}
style={styles.row}
style={[styles.row,styles.bold]}
RN的导航
官网 ： 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/material-top-tabs react-native-tab-view
原生导航
堆栈导航
底部导航
顶部安卓导航
npm install
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context @react-native-community/masked-view
配置
android/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}
/>
<Stack.Screen
name="Details"
component={Details}
/>
</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}}>
