React Native 笔记

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

打包

打包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 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