React DAY07

最新推荐文章于 2024-04-20 10:00:07 发布

BlueMozeer

最新推荐文章于 2024-04-20 10:00:07 发布

阅读量460

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_40185402/article/details/128448678

版权

复习：

1.RN中的样式和布局

RN样式完全脱离浏览器，自成体系的一套样式，使用对象创建样式
行内样式：

<Text style={{color: 'red'}}>

内部样式：

let ss = StyleSheet.create({danger: {color: 'red'}})
<Text style={ss.danger}>

外部样式：

//style.js
	let gss = StyleSheet.create({danger: {color: 'red'}})
	//Login.js
	<Text style={[gss.danger, {}]}>

布局：弹性布局（display:flex； flex-direction:column;）

2.RN常用组件

View、ScrollView、Text、StatusBar、Image、TextInput、Button、Pressable、TouchableOpacity、FlatList

3.RN常用 JS API

  ①StyleSheet.create()
  ②Alert.alert()
  ③ToastAndroid.show()
  ④AsyncStorage.setItem()/getItem()/removeItem()/clear()
  ⑤useWindowDimensions()

4.RN中的异步请求方法

let  res  =  await  fetch( url, {method, headers, body} )
let  data  =  await  res.json( )

5.RN中的路由导航模块

基于浏览器的React项目中使用的路由模块： react-router-dom
脱离浏览器的React项目中使用的路由模块： react-navigation
①在RN项目中下载必需的模块到node_modules —— 4-5个模块
②重新构建一遍APP的安装文件，得到全新的.apk文件
③在安卓手机中重新安装App，重新配置开发服务器，重启App
④为整个项目中的“页面/屏幕”分配路由地址：App.js
路由器(导航容器) > 路由列表(导航器) > 路由对象(屏幕)*N

  let {Navigator, Screen} = createNativeStackNavigator( )
	  <NavigationContainer>
		<Navigator>
			<Screen name=""  component={}/>
			.....
		</Navigator>
	  </NavigationContainer>

一、React Native组件库

React是一个MVVM框架；
ReactNative是一个基于React框架的移动端UI组件库——是Facebook官方提供的；
官网：https://reactnative.dev/
中文网：https://reactnative.cn/
Vue.js+Vant项目运行原理：

  .vue  =>  Webpack编译  =>  .html/.css/.js   =>   运行于客户端浏览器

React+RN项目运行原理：

  .js/.jsx => Webpack编译  =>  .java或.oc  =>  JAVA或OC编译  =>  .apk或.ipa安装包   =>  安装到手机中运行为原生App(完全脱离浏览器)

（必选操作）运行空白RN项目，在自己的电脑和手机中运行该项目——250MB+
①PC端运行RN项目自带的开发服务器

cd  MyRnApp   &&   npm  start

提示：开发服务器只会占用8081端口

②启动安卓模拟器，安装RN项目编译得到的App

APK路径：MyRnApp\android\app\build\outputs\apk\debug

③启动手机中的App，在App设置中配置开发服务器的IP和端口号
查看Windows服务器当前的真正IP地址： ipconfig

例如，我当前电脑的IP地址是  192.168.0.105
点击手机“菜单键”> Settings > DebugServerHost&PortForDevice > 输入：
192.168.0.105:8081

④重启手机中的App，会自动连接开发服务器，获取最新的内容

提示：如果出现App闪退、App已停止、App无法启动、App启动后白屏…请重启App、或重新安装App、重启Windows、安装其它的模拟器… 再重试上述几步

二、RN中的样式

第一种：行内样式

<Text  style={{color:'#f00'}}>

第二种：内部样式

let css = StyleSheet.create({	
		danger: {
			color: '#f00',  
		}
	})

第三种：外部样式

说明：
①RN中的样式没有“级联”特性，即子组件不会继承父组件的样式——仅有的一个例外：Text中的Text
②RN中的样式只能用style属性赋值，没有class/className属性——RN组件体系中没有任何一个属性是通用的，例如：有的组件没有style、所有组件都没有className、有的组件没有onClick…
③style属性可以赋值为一个样式对象，也可以赋值为一个样式对象的数组
④RN中可用的样式属性比标准CSS要少得多，例如：没有float、background、border....；有些属性虽然有，但是可用值也比标准CSS少得多，例如：display只有flex和none两种选择
⑤RN的样式中没有“选择器”的概念，样式都是对象
⑥RN中的尺寸单位只有： px 和 %，其中px必须省略不写，例如：width: '50%' 或 width: 20 —— 没有rpx、vw、em等单位
⑦字体默认大小是14px（记得省略px），可以很大，也可以很小（没有12px的限制）
⑧RN中的布局只有： display: flex（默认值），而且主轴方向默认是“column”
在这里插入图片描述

三、RN中的组件

RN组件的官网手册：https://reactnative.cn/docs/components-and-apis
①RN中不能使用HTML组件 —— RN中的组件最终都要编译为JAVA，而HTML标签无法编译
②RN官方提供了20个组件；可以使用这20个组件组合定义出更复杂的自定义组件

RN常用组件：
①View：视图，是最简单的容器元素，默认都是“弹性容器”，而且主轴方向是纵向
②Text：文本，是最简单的文本元素，RN体系内只有Text中可以放置字符串
③Image：图像
本地图片：手机中的图片，必须把开发服务器上的图片进行编译打包，才能装进手机中

<Image source={require('../img/xx.png')}/>   无需指定尺寸

远程图片：图片在远程服务器上，只能通过URL地址来访问

<Image source={{uri: '图片的地址'}}  style={{width, height}}/>   必须指定尺寸

④TextInput：单行文本输入框/单行密码输入框/多行文本输入框，注意：获取输入框中的内容只能使用“类似于普通React项目中的’受控组件’方法”

<TextInput value={uname}  onChangeText={txt=>setUname(txt)}/>
<TextInput secureTextEntry={true}/>
<TextInput multiline={true}/>

⑤StatusBar：控制屏幕顶部状态栏的样式
⑥Button：按钮，在项目中一般不使用（因为没有style属性，无法定制样式），而用Text代替
⑦Pressable：可以按压的，为其它组件提供按压相关事件，onPress / onLongPress / onPressIn(开始按压) / onPressOut(按压结束)
⑧TouchableOpacity：触摸后不透明度可以改变的组件，为其它组件提供用户交互反馈

⑨Modal：弹出一个遮盖住全屏的“模态对话层”，其中的内容可以随意指定
⑩FlatList：平面列表，用于横向/纵向/之字形排列多个元素

四、RN中常用的JS API

①ToastAndroid.show( )：弹出吐司对话框——注意：只有Android平台支持
②fetch( )：RN官方高仿W3C的fetch标准提供了一套异步请求方法
③Alert.alert( )：弹出一个警告对话框（模态对话框）
④AsyncStorage.setItem()/getItem()/removeItem()/clear()：异步操作客户端本地缓存
⑤useWindowDimensions()：获得当前屏幕的尺寸

总结：客户端缓存汇总
H5：sessionStorage或localStorage.setItem() —— 同步方法
uni-app：uni.setStorage()/uni.setStorageSync() —— 异步或同步方法
RN：AsyncStorage.setItem() —— 异步方法
结论：PC机应用中读取缓存文件偏向于使用“同步方法”；手机端应用中读取缓存文件偏向于使用“异步方法”

总结：前端项目中实现AJAX效果的技术有哪些？
①W3C 提供的 XMLHttpRequest：浏览器都支持，但是使用繁琐
②jQuery提供的$.ajax()：第三方提供的，底层基于XHR，基于回调
③axios：第三方提供的，既可以用于Node.js应用（基于http模块）也可以用于基于浏览器的应用（基于XHR），Promise
④uni.request：仅用于uni-app项目，底层是对XHR或小程序异步请求方法进一步封装
⑤W3C提供的fetch：行业标准，最新的浏览器都支持，用于取代XHR，基于Promise

五、RN项目中发起异步的服务器端请求

RN官方高仿W3C的fetch标准提供了一套异步请求方法

//使用fetch发起GET请求
let url = "..."
//向指定URL发起异步请求，等待得到响应消息
let res = await fetch( url )
//读取响应消息主体，直至读完，再进行JSON解析
let data = await res.json( )	


//使用fetch发起POST请求
let url = "..."
let options = {
    method: 'POST',
    headers: {'Content-Type':  'application/json'},
    body: JSON.stringif( {k:v, k:v, ...} )
}
//向指定URL发起异步请求，等待得到响应消息
let res = await fetch( url, options )
//读取响应消息主体，直至读完，再进行JSON解析
let data = await res.json( )

总结：
Vue.js项目中的路由导航模块：  
      vue-router
uni-app项目中的路由和导航模块：  
      路由词典pages.json、路由跳转uni.navigateTo()/...
React项目中的路由和导航模块：
      基于浏览器的应用(即网站/H5)： react-router-dom
      脱离浏览器的应用(即RN）： react-navigation

六、RN项目中的路由和导航模块

RN项目中使用第三方模块 react-navigation 来实现路由和导航功能；
官网：https://reactnavigation.org/ 最新版本：6.x
使用步骤：
①在RN项目中安装必需的react-navigation相关模块

npm install @react-navigation/native
	npm install react-native-screens 
	npm install react-native-safe-area-context
	npm install @react-navigation/native-stack    	如果需要栈式导航
	npm install @react-navigation/bottom-tabs		如果需要底部标签页式导航

②使用之前安装好的3GB+安卓构建环境，重新构建一遍APP安装文件

npx  react-native  run-android

③在安卓模拟器中重新安装App，重新设置开发服务器的IP和端口号，重新启动App
④创建必需的“页面/屏幕”组件，为每一屏分配路由地址：

//App.js
<NavigationContainer>		导航容器（类似于之前的路由器）
	<Navigator>			导航器（类似于之前的路由列表）
		<Screen name="login" component={ Login }/>		屏幕（类似于之前的路由对象）
		......
		<Screen name="list" component={ List }/>		屏幕（类似于之前的路由对象）
	</Navigator>
</NavigationContainer>

⑤如何定制标题栏？
方法1：静态配置法（App.js里）

<Screen name component options={{title, headerStyle, headerTintColor,...}}/>

方法2：动态修改法（路由组件里）

props.navigation.setOptions({title, headerStyle, headerTintColor,...})

⑥如何在页面/屏幕间跳转？

props.navigation.navigate(目标地址)   //导航跳转	
	props.navigation.goBack()			//导航返回
	------------------------------------------------------------------------------
	props.navigation.push(目标地址)		//新页面入历史栈
	props.navigation.pop()				//当前页面从历史栈中弹出，返回上一页面
	props.navigation.popToTop()			//所有页面从历史栈中弹出，返回第一个页面，常用于退出登录

⑦如何在跳转时携带路由参数？
页面1：props.navigation.navigate(目标地址, {k1: v1, k2:v2, ....} )
页面2：props.route中可以读取上个页面传来的路由参数
提示：RN的路由跳转传参没有采用类似浏览器应用中的“查询字符串”方案——?k=v&k=v&…
查询字符串格式来自于HTTP协议，专用于浏览器的传参方案 —— RN应用没有浏览器

七、React父子组件间的数据传递

父组件=>子组件 —— Props Down：

//Parent.js
let [carousels] = useState([(),(),...])
<Child list={carousels}/>	

//Child.js
function Child( { list } ){
   return <>{list.map(...)}</>
}

子组件=>父组件 —— Props Up：