RN是React的原生组件库

网址:React Native 中文网 · 使用React来编写原生应用的框架

一、ReactNative开发环境的搭建

 在本机搭建RN项目开发运行环境 —— 3GB+

 ①安装必需的编译软件：Node.js + JDK

 ②安装Android原生App开发软件 —— Android Studio

 ③使用Android开发软件下载编译必需的第三方模块—— Android SDK

 ④配置系统的环境变量，告诉系统Android SDK的安装路径

 ⑤下载并安装RN项目脚手架工具，创建空白项目  

npx   react-native   init   MyRnApp

 ⑥编译空白项目，得到AndroidApp安装文件

cd  MyRnApp

npx  react-native   run-android

RN英文官网： reactnative.dev RN中文网：reactnative.cn

二、运行RN空白项目 —— 254MB+

  1.安装并启动Android模拟器（例如夜神、雷电、逍遥等）

  2.在模拟器中安装空白项目中的.apk文件

@\android\app\build\outputs\apk\debug\app-debug.apk

  3.启动空白脚手架项目自带的开发服务器

npm  start

  4.启动手机中的App，配置开发服务器的IP地址和端口号

172.163.100.77:8081

  5.重启手机中的App，即可以自动连接到开发服务器

手机中无法见到“Welcome To ReactNative”欢迎界面的可能原因： ① 没有启动开发服务器 ② 手机App没有正确的配置开发服务器IP和端口号 ③ 配置完服务器地址后没有重新启动App

手机中App无法启动，或提示“MyRnApp启动失败”，或闪退，或白屏 解决办法： ① 重启App试试；如果不行，继续② ② 卸载App，再重新安装；重启后重新配置服务器IP和端口号；如果不行，继续③ ③ 重启模拟器，重新安装App，重新配置服务器IP和端口号；如果不行，继续④ ④ 重启Windows，重启模拟器，重新安装App，重新配置服务器IP和端口号；如果不行，继续⑤ ⑤ 卸载夜神，换其他模拟器

三、RN项目中的样式问题

 RN中没有CSS；

 有一套自己的样式规则，其中有些与标准的CSS名称相近而已——RN项目被编译为Java或OC，运行时完全脱离浏览器的！！！

 声明组件的样式只能用style，没有class —— RN中没有任何一个属性/事件是“通用”的。

 具体的样式编写规则：

 1.View组件的display属性只有两个可取值：flex(默认)、none；没有inline、block等；

 2.所有的容器都是弹性容器，主轴方向默认都是column，而不是row；

 3.RN中没有float属性，不能使用浮动/流式布局；

 4.RN中有position属性，可取值只有relative/absolute/fixed；

 5.组件的样式有三种形式：

行内样式：<Text style={{color:'red'}}>

内部样式：let ss = StyleSheet.create({danger:{color:'red'}})   

<Text style={ss.danger}>

外部样式：export default let gss = StyleSheet.create({danger:{color:'red'}})   

import gss from 'style.js'   <Text style={gss.danger}>

 6.RN中的样式没有Cascading(级联)特性，即父组件的样式不会继承给子组件——Text中的Text除外；

 7.RN中的尺寸单位只有两种：%、px；而且像素需要省略px，例如：200px需要简写为200；

 8.默认字体大小也是14px，且没有最小值限制；

 9.RN中所有的样式都是“单值的”，一个属性只能赋一个值，例如：padding: 30;  错误：padding: 30  50;

   所有需要赋值为“多值的”的样式，都被取消了，例如：border、background。

四、RN中的常用组件

  1、Text：文本组件，RN中唯一可以放置文本的组件

  2、View：视图容器，默认采用弹性布局

  3、Image：图片，分为两种形式：

①手机本地的图片（静态图片）：使用时务必把图片打包入App（即必需导入）

let  logo = require('../img/logo.png')

import  logo  from  '../img/logo.png'

<Image source={logo}/>

②远程服务器上的图片（动态图片）：使用时必须明确指定宽高尺寸（否则默认宽高都是0）

<Image style={{width: 100, height: 50}}  source={{uri: '图片地址'}}/>

提示：Image没有onPress或类似的属性。

  4、ImageBackground：背景图组件，为其中包含着的组件添加背景图

<ImageBackground  source={本地或远程图片}> 其它任意组件 </ImageBackground>

  5、Button：按钮组件，是一个单标记标签，不能添加innerText；没有style属性！！！ 

<Button title="登录" onPress={处理方法}/>

提示：由于Button无法使用style订制样式，项目中一般用Text代替。

 6、Pressable：可按压的组件，为其它组件添加“按压”相关的4个事件

<Pressable onPress={} onLongPress={} onPressIn={} onPressOut={}>其它组件</Pressable>

 7、TextInput：文本输入组件，可用于单行文本输入框、单行密码输入框、多行文本输入框

<TextInput placeholder="" secureTextEntry={} multiline={}  value={}  onChangeText={}/>

提示：获取用户的输入值，只能使用类似“受控组件”方案(没有“非受控组件”方案)，且onChange事件替换为onChangeText —— RN此时没有完全模拟出DOM操作！！

 8、FlatList：平面列表，用于“纵向”或 “横向”或“横+纵向”呈现批量数据

<FlatList  data={数组}  renderItem={渲染一个列表项的方法}/>

 9、TouchableOpacity：触摸后不透明度发生改变的组件，主要为其它元素添加点击反馈

<TouchableOpacity>需要添加点击反馈的子组件</TouchableOpacity>

 10、ActivityIndicator：活动指示器，显示一个不停旋转的加载中提示动画

AJAX异步数据请求效果有哪些实现方案？ ①XHR  ②jQuery.ajax()  ③axios   ④wx.request   ⑤uni.request   ⑥fetch

五、RN中的异步数据请求

  React项目中如果是基于浏览器的，可以使用XHR或fetch任意方案；

  RN项目都是脱离浏览器的，不能使用XHR；官方模拟fetch API标准实现了一套类似的接口。

//使用fetch发起GET请求 let res = await fetch( url ) let data = await res.json( )

//使用fetch发起POST请求 let options = {method, headers, body} let res = await fetch( url, options ) let data = await res.json( )

框架	路由导航
Vue.js	Vue-Router
小程序	pages.json + 五个跳转方法
uni-app	pages.json + 五个跳转方法
React	基于浏览器的项目：React-Router-DOM 脱离浏览器的RN项目：React-Navigation

六、RN中的路由导航模块 —— React-Navigation

  是一个专用于脱离浏览器的RN项目的路由导航模块；

  英文官网： https://reactnavigation.org

  简历上：“熟练使用英文手册 —— 大标题字+示例代码”

  基础使用步骤：

  ①在RN项目中下载导航必需的第三方模块

npm  i   @react-navigation/native

npm  i   react-native-screens

     npm  i   react-native-safe-area-context

npm  i   @react-navigation/native-stack

  ②重新构建一遍当前的App安装文件，重新安装到手机中

npx  react-native   run-android        此步需要安装3GB+的开发环境

  ③在启动模块中创建“路由器>路由词典>路由”

let {Navigator, Screen} = createNativeStackNavigator()

<NavigationContainer>

<Navigator>

<Screen name="login" component={AdminLogin}/>

....

</Navigator>

</NavigationContainer>

  ④访问测试，确保每个地址都可以显示出对应的组件

  ⑤修改标题栏文字及样式

<Screen name=" " component={ }  options={{title: ' ', ...}}/>

  ⑥如何在两个 屏幕/页面 间跳转
导航跳转：props.navigation.navigate('路由名称')

导航返回：props.navigation.goBack( )

  ⑦页面跳转时传递路由参数

Screen1：props.navigation.navigate('Screen2',  {k1: v1,  k2: v2, ...})   //类似于父子组件间发射事件

Screen2：组件挂载时  let v2 = props.route.params.k2

?k=v&k=v 称为“查询字符串”或“搜索参数” —— 是HTTP协议的一部分，用于规定客户端浏览器与WEB服务器之间传递数据的格式要求

React生态系统中成员的最新版本： React：18.2 React-Router-DOM：6.4 React Native：0.70 React-Navigation：6.x

七、RN中的innerHTML绑定

技术	innerText绑定	innerHTML绑定
Vue.js
小程序/uni-app
React
ReactNative	<Text>{内容}</Text>	RN项目脱离浏览器的，无法解释执行HTML片段！ 只能在RN项目中嵌入一个微型浏览器才行——WebView组件！ <WebView  source={{uri: 'https://tmooc.cn'}}/> <WebView  source={{html: '<h1>标题</h1><hr/>'}}/>

提示：ReactNative官方的WebView已经禁止使用了；推荐使用社区提供的react-native-webview，但此组件的高度无法自动增长，推荐使用第三方提供的 AutoHeightWebView 组件；使用方法：

①下载必需模块文件

npm  i   react-native-webview

npm  i   react-native-autoheight-webview

②重新构建一遍整个RN项目，得到新的.apk文件，重新安装到手机中

npx  react-native  run-android

③在页面中使用AutoHeightWebView

<AutoHeightWebView  source={{uri: 'https://tmooc.cn'}}/>

<AutoHeightWebView  source={{html: '<h1>标题</h1><hr/>'}}/>

八、RN项目的构建        

  RN项目最终都被编译为原生Java或Objective-C代码，有两种构建模式：

  ① 调试模式 —— 编译得到的代码未经优化，但是可以连接开发服务器进行实时更新

  npx   react-native    run-android

  得到安装文件：  app-debug.apk——45MB

  ② 发布模式 —— 编译得到的代码经过优化压缩，可以发布到应用商店供用户正式使用

  得到安装文件：  app-release.apk——20MB

     类似于之前的 npm run build 操作；但是本质不同：是把JS=>Java，编译Java项目(需要Gradle)

  提示：想执行此操作，必须之前安装好3GB+的环境了

  打包发布RN应用为Android APP的步骤：

  官网手册地址：https://www.react-native.cn/docs/signed-apk-android

  ①生成一个签名密钥(即App所有权证书)

keytool   -genkeypair   -v   -storetype   PKCS12   -keystore  d:/my-release-key.keystore  -alias  my-key-alias  -keyalg  RSA   -keysize  2048   -validity   10000

提示：keytool.exe文件在JDK的安装目录下的/bin目录下，上述命令必须在此目录下运行

  ②设置gradle变量(Gradle就是Java项目中的“Webpack”)

把my-release-key.keystore文件放到你工程中的/android/app文件夹下

修改/android/gradle.properties，在最后添加如下变量的声明：

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore

MYAPP_RELEASE_KEY_ALIAS=my-key-alias

MYAPP_RELEASE_STORE_PASSWORD=*****

MYAPP_RELEASE_KEY_PASSWORD=*****

  ③把证书相关变量加入到项目的gradle配置中

修改/android/app/build.gradle，在第148行后添加：

release {

            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {

                storeFile file(MYAPP_RELEASE_STORE_FILE)

                storePassword MYAPP_RELEASE_STORE_PASSWORD

                keyAlias MYAPP_RELEASE_KEY_ALIAS

                keyPassword MYAPP_RELEASE_KEY_PASSWORD

            }

     }

修改第176行，把 signingConfig signingConfigs.debug  修改为 signingConfig signingConfigs.release

  ④（可选）修改App图标和名称

修改\android\app\src\main\res\values\strings.xml文件，可以设置App的名字：

<string name="app_name">学子管理端</string>

把自己的App图标文件替换默认的，替换掉\android\app\src\main\res\mipmap-xxxx目录下的所有图标

  ⑤如果App需要访问网络（例如：访问服务器端数据API），需要向用户申请网络使用权限

在\android\app\src\main\AndroidManifest.xml中确保有如下行：

    <uses-permission android:name="android.permission.INTERNET" />

  ⑥使用gradle编译项目，生成发行版的APK文件

进入项目的/android，运行此目录下的文件：

gradlew  assembleRelease

  成功后，在\android\app\build\outputs\apk\release\下得到app-release.apk，可以发布到各大应用市场或者直接下载到手机安装即可

API-1.1: 管理员登录：

https://www.codeboy.com/xuezi/admin/data/admin_login.php?aname=admin&apwd=123456

API-1.2: 当前登录的管理员可用的功能菜单： 

https://www.codeboy.com/xuezi/admin/data/main_menu.php

API-1.3: 商品列表：

https://www.codeboy.com/xuezi/admin/data/product_list.php?pno=2&pageSize=10

API-1.4: 商品详情：

https://www.codeboy.com/xuezi/admin/data/product_details.php?lid=3