React Native 笔记

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.xmlapplication字段添加属性android:usesCleartextTraffic="true" f

你可能感兴趣的:(React Native 笔记)