React Native的版本更新也比较快，感觉这可能会是一个需要踩无数坑的学习过程💪 淘宝npm镜像设置：http://npm.taobao.org/ Android SDK工具: http://www.androiddevtools.cn
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
# 传统安装方法 npm install -g react-native-cli # 初始化项目 react-native init MyProject cd MyProject # iOS启动 react-native run-ios - or - Open ios/MyProject.xcodeproj in Xcode # Android启动 react-native run-android -------------- # 新版尝鲜安装方法 npm install -g create-react-native-app # 初始化项目 create-react-native-app AwesomeProject # npx react-native init MyProject cd AwesomeProject npm start |
关于Expo
初步深尝试了一下感觉真机测试用Expo直接扫码还是比较方便的，安装上的主要问题在于Android无法使用Google Play，不过官方提供了下载地址： iOS可直接在App Store中安装Expo Client Android可通过如下地址下载 http://expo.io/–/api/v2/versions/download-android-apk 电脑端模拟及编码工具： iOS: Xcode Android: Android Studio + Genymotion
扩展知识
Webstorm添加React Native智能提示
|
1 2 3 4 |
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 下载后File > Import Settings选择刚刚下载的ReactNative.jar进行添加 React的安装使用： https://facebook.github.io/react/docs/installation.html |
Flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
安卓投屏工具：https://github.com/Genymobile/scrcpy
代码相关
|
1 2 |
const screenWidth = Math.round(Dimensions.get('window').width); const screenHeight = Math.round(Dimensions.get('window').height); |
配置相关
安卓动图 GIF及 WebP 的支持(build.gradle)
|
1 2 3 4 5 6 7 |
// 支持 Android 4.0之前的版本 implementation "com.facebook.fresco:animated-base-support:1.3.0" // 支持 GIF动图 implementation 'com.facebook.fresco:animated-gif:2.0.0' // 支持 WebP及动图 implementation 'com.facebook.fresco:animated-webp:2.1.0' implementation 'com.facebook.fresco:webpsupport:2.0.0' |
调试(ctrl/cmd+m)
index.js 中加入如下配置可查看网络请求
|
1 |
global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest |
推荐使用 https://github.com/jhen0409/react-native-debugger
mobx
|
1 2 3 |
yarn add mobx mobx-react @babel/plugin-proposal-decorators // babel.config.js plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]], |
常用组件工具
- React Native Debugger
- React Navigation
- Scrcpy
- React Native Elements
- Teaset UI组件库
- react-native-linear-gradient
- react-native-confirmation-code-field
常见问题
1、xcrun: error: unable to find utility “simctl”, not a developer tool or in PATH
打开Xcode > Preferences > Locations，更改一下 Command Line Tools选项即可。
