React Native 笔记
React Native 笔记
预备:搭建环境
开始:创建应用
# 创建
npx react-native init <appname>
cd <appname>
# 在 android 真机上运行
yarn react-native run-android
# and
yarn react-native start
调试
via 数据线
via WiFi adb
adb tcpip 55555
adb connect <phone-ip>:55555
# 查看手机IP
adb shell ifconfig wlan0
# 取消连接
adb disconnect
在手机上设置 Change Bundle Location: <开发电脑IP>:8081
打包
生成一个签名密钥
设置 gradle 变量
把签名配置加入到项目的 gradle 配置中
生成发行 APK 包
cd android
./gradlew assembleRelease
UI 组件库
native-base
# Install NativeBase
npm install native-base --save
# Install Peer Dependencies
react-native link
react-native-elements
# Step 1: Install react-native-elements
yarn add react-native-elements
# or with npm
npm i react-native-elements --save
# Step 2: Install react-native-vector-icons
yarn add react-native-vector-icons
# or
npm i --save react-native-vector-icons
# link
react-native link react-native-vector-icons
# react-native 未找到命令 可使用
npx react-native link react-native-vector-icons
yarn react-native link react-native-vector-icons
DEMO
QA
执行 npm run android
出现问题,降低"react-native-gesture-handler" 的版本即可通过,执行:
npm i react-native-gesture-handler@1.0.16
# 再执行
npm run android
可以将APP安装到真机上,然后执行npm start
又会遇到问题,此时需恢复"react-native-gesture-handler" 的版本
npm i react-native-gesture-handler
# 再执行
npm start
其他库
图标库:react-native-vector-icons
yarn add react-native-vector-icons
# or
npm i --save react-native-vector-icons
react-native-axios
yarn add react-native-axios
Q&A
Q:打包后安装app 遇到与开发模式下安装包签名不一致问题
A:
adb uninstall <package>
卸载原 app,安装新appadb install <xx.apk>
Q:
adb devices
出现 “no permission”
Q: ReactNative Android9.0以上打包apk后http请求不到解决方法
A: 在文件
android/app/src/main/AndroidManifest.xml
中application
字段添加属性android:usesCleartextTraffic="true"
f