简介
React Native 学习笔记。
React项目初始化
npm install -g npx
npx create-react-app my-app
React Native项目初始化
expo 初始化
$ npm install -g expo-cli
$ expo init my_app
$ npm start
react-native-cli 初始化
$ cnpm install -g react-native-cli
$ brew install watchman
# 指定版本
$ react-native init my_app --version 0.44.3
Android 模拟器
1. 安装 jdk8
地址: https://www.imooc.com/article/287706
Android SDK 位置: sdk.dir = ~/Library/Android/sdk
2. 安装 Android Studio
3. 模拟器下载
Android Studio -> Tools -> AVD manager
模拟器安装位置: /Users/yunaichun/.android/avd
4. 启动模拟器
$ ~/Library/Android/sdk/emulator/emulator -list-avds
$ ~/Library/Android/sdk/emulator/emulator @Nexus_5X_API_29
5. 刷新 【在模拟器界面操作】
double click: r
6. 打开调试面板
command + m
iOS 模拟器
1. 模拟器下载
xCode -> preference -> components
2. 启动模拟器
open -a Simulator
Hardware -> Device -> 不同系统 -> 选择其他iPhone
3. 刷新 【在模拟器界面操作】
command + r
4. 打开调试面板
command + d
启动项目
# 启动 Android
$ react-native run-android
# 启动 iOS
$ react-native run-ios
打包 Android apk
1、生成签名证书
keytool工具位置查找: flutter doctor -v
keytool位置: cd /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/jre/bin
生成 keystore: ./keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
2、创建 key.properties 文件
位置: my_app/android/key.properties
内容:
storePassword=***
keyPassword=***
keyAlias=key
storeFile=/Users/yunaichun/key.jks
3、配置 key 注册
位置: my_app/android/app/build.gradle
内容1: android{ 这一行前面,加入如下代码
def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
内容2:
buildTypes {
release {
signingConfig signingConfigs.debug
}
}
替换为 ->
buildTypes {
release {
signingConfig signingConfigs.release
}
}
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile file(keystoreProperties['storeFile'])
storePassword keystoreProperties['storePassword']
}
}
4、添加网络权限
位置: my_app/android/app/src/main/AndroidManifest.xml
内容:
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
5、生成 apk
进入项目下的android目录: ./gradlew assembleRelease
输出: my_app/build/app/outputs/apk/release/app-release.apk
验证打包后文件: react-native run-android --variant=release
项目实战
参考资料
官网
布局
导航器
- React Native 导航器 - NavigationActions、StackActions
- React Native 导航器 - createStackNavigator
- React Native 导航器 - createMaterialTopTabNavigator
- React Native 导航器 - createBottomTabNavigator
- React Native 导航器 - createDrawerNavigator
- React Native 导航器 - createSwitchNavigator
高性能列表组件
- React Native 高性能列表组件 - FlatList
- React Native 高性能列表组件 - SwipeablFlatList，不过在 0.60 版本已经移除
- React Native 高性能列表组件 - SectionList