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.toymoban.com/news/detail-466570.html
https://www.codeboy.com/xuezi/admin/data/product_details.php?lid=3文章来源地址https://www.toymoban.com/news/detail-466570.html
到了这里，关于RN(React Native)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar](https://imgs.yssmx.com/Uploads/2024/02/448872-1.png)
