React 2
RN常用组件
view,scrollView,,text,statusBar,TextInput,image,button（不可定制样式没有style样式）pressable作为一个容器包裹 (onpressIn,onpressout,onpress,onlongpress)，TouchableOpcaity设置透明度
Model:弹出一个遮盖全层的模态对话框
FlatList(平面列表) 横向，纵向，
两个数据:data和renderItem
data：要渲染的所有数据
renderItem：渲染的一个列表项
<FlatList data={list} renderItem={_renderItem}
let _renderItem=()=>{
//为一个对象，可以将内容进行解析出来
Item每个轮播广告对象 index轮播广告对应的原始数组中的下标
}
RN常用JS API
1)styleSheet.create() 样式
2）Alert.aler() 模态框
3）ToastAndroid.show() Toast.long/Toast.short
4)AsyncStorage.setItem()/getItem()/removeItem()/clear()
5)useWindowDimensions() 获取当前屏幕尺寸
RN中的异步请求方法
let res=await fetch(url,options)
let data=await res.json()
RN路由导航模块
浏览器:react-router-Dom
脱离浏览器 :react-navigation
1)需要下载四到五个模块
2)在RN中下载必需模块node_module
3）重新构建一遍App安装文件
4)重新进行app重新配置
let {navigator,screen}=createNativeStackNavigator（）
为整个项目分配页面/屏幕分配路由
路由（导航容器）>路由列表(导航器)>路由(屏幕)
navigateContainer>navigator>screen(name,component)
如何定制标题栏
方法1：静态配置法(App.js)
<Screen name component options={{title,headerStyle,headerTintColor}}
export default function App() {
return(
<NavigationContainer>
{/*初始路由名称，强制将login为第一位默认首页**/}
<Navigator initialRouteName='login'>
<Screen name="login" component={Login} options={{
headerShown:false //是否显示页头/标题栏
}}/>
<Screen name="mallDetails" component={MallDetails}options={{
title:'商品详情', //标题
headerStyle:{
backgroundColor:'green' //背景颜色
},
headerTintColor:'#fff', //文字颜色
headerTitleAlign:'center' //居中方式
}} />
<Screen name='mlist' component={MallList} options={{
title:'社区商城',
headerStyle:{
backgroundColor:'green' //背景颜色
},
headerTintColor:'#fff', //头部文字颜色
headerTitleStyle:{
fontWeight:'bold'
},
headerTitleAlign:'center'， //文字对齐方式
headerVisible:false //头部后退按钮可见
}}/>
</Navigator>
</NavigationContainer>
)方法2：动态修改法(路由组件中)
props.navigation.setOptions({})
//只有路由组件(路由地址的组件)的props才能进行解构出:navigation\route
export default function MallList({navigation,route}) {
//生命周期挂载 空依赖
useEffect(()=>{
//异步请求商城首页数据
//修改顶部标题栏
//动态修改法 在动态修改法中可以使用设置静态修改法中的内容
navigation.setOptions({
headerRight:()=>{ //headerRight只能写函数返回显示内容
//导入本地图片
//由于image没有onpress点击事件，所以通过pressable进行包裹
return(
//pop返回历史栈中上一页， popTop:返回历史栈中的第一页
<Pressable onPress={()=>navigation.popToTop()}>
<Image style={{width:34,height:34}} source={require('../img/user1.png')}></Image>
</Pressable>
);
},
});
},[])补充:
1)image中不支持onPress 所以需要通过pressable进行包裹(onpress/onlongpress/onpressIn/onpressOut)
2)headerRight:()=>{}//headerRight中只能为一个函数，函数中包含内容
动态配置法(navigation.setOptions)的参数会覆盖静态配置法(options)的参数
如何在页面/屏幕间跳转
props.navigation.navigate(目标地址) //导航跳转
props.navigation.goBack() //导航返回
props.navigation.push(目标地址) //新页面入历史栈
props.navigation.pop() //当前页面从历史栈中弹出，返回上一页面
props.navigation.popToTop() //所有页面从历史栈中弹出，返回第一个页面
APP.js中的props没有navigation 只有在路由组件中的props中才可以解析出navigation/route才可以实现跳转
如何在跳转时携带参数:
页面1：props.navigation.navigate(目标地址,{})
页面2:props.route中读取上个页面传来的参数
route.params获取传过来的参数
<View>
<Text>MallList</Text>
<Text onPress={()=>{
navigation.navigate('mallDetails',{id:3,name:'zs'})
}}>页面跳转</Text>
<Text onPress={()=>{
navigation.navigate('mallDetails',{id:4})
}}>页面跳转2</Text>
</View>
)export default function MallDetails({navigation,route}) {
console.log(route);
useEffect(()=>{
//获取上个页面传参
console.log(route.params);
//修改当前详情页的标题
navigation.setOptions({
title:'可口可乐'
})
},[])注意:useEffect(()=>{}）不可以加async 解决方法使用立即调用函数()()
//useState每一个生命周期都是一个单独的闭包
其中的变量外界无法使用，外界的数据变化，内部也无法获取
所以在使用时只能放在一个生命周期中