React Native 笔记
预备:搭建环境
搭建开发环境 | React Native 中文网
开始:创建应用
# 创建
npx react-native init
cd
# 在 android 真机上运行
yarn react-native run-android
# and
yarn react-native start
调试
via 数据线
via WiFi adb
adb tcpip 55555
adb connect :5555
# 查看手机IP
adb shell ifconfig wlan0
# 取消连接
adb disconnect
打包
打包APK
生成一个签名密钥
设置 gradle 变量
把签名配置加入到项目的 gradle 配置中
生成发行 APK 包
cd android
./gradlew assembleRelease
UI 组件库
native-base
GetStarted
# Install NativeBase
npm install native-base --save
# Install Peer Dependencies
react-native link
react-native-elements
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
Github: GeekyAnts/NativeBase-KitchenSink
QA
执行 npm run android
出现问题,降低"react-native-gesture-handler" 的版本即可通过,执行:
npm i [email protected]
# 再执行
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
卸载原 app,安装新appadb install
Q:
adb devices
出现 “no permission”
Q: ReactNative Android9.0以上打包apk后http请求不到解决方法
A: 在文件
android/app/src/main/AndroidManifest.xml
中application
字段添加属性android:usesCleartextTraffic="true"
f