React Native学习笔记

Alan

7 年前

React Native的版本更新也比较快，感觉这可能会是一个需要踩无数坑的学习过程💪 淘宝npm镜像设置：http://npm.taobao.org/ Android SDK工具: http://www.androiddevtools.cn

# 传统安装方法
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

# 传统安装方法

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智能提示

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
下载后File > Import Settings选择刚刚下载的ReactNative.jar进行添加
React的安装使用：
https://facebook.github.io/react/docs/installation.html

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

代码相关

const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

1 2	const screenWidth = Math.round(Dimensions.get('window').width); const screenHeight = Math.round(Dimensions.get('window').height);

配置相关

安卓动图 GIF及 WebP 的支持(build.gradle)

    // 支持 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'

// 支持 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 中加入如下配置可查看网络请求

 global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest

1	global.XMLHttpRequest = global.originalXMLHttpRequest \|\| global.XMLHttpRequest

mobx

yarn add mobx mobx-react @babel/plugin-proposal-decorators
// babel.config.js
plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]],

yarn add mobx mobx-react @babel/plugin-proposal-decorators

// babel.config.js

plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]],

常用组件工具

常见问题

1、xcrun: error: unable to find utility “simctl”, not a developer tool or in PATH

打开Xcode > Preferences > Locations，更改一下 Command Line Tools选项即可。