React-Native 学习

发表于 | 分类于 |

React-Native 学习

Docs

官方文档 (目前0.52-RC)

国内翻译 (目前0.51)

工具配置

可选 sublime, vscode, webstorm 等等自己喜欢的工具, 网上都有配置适合开发 RN 的教程

sublime 环境/插件配置

主要是代码提示
参考安装各种

配置各 IDE 设置及环境

VSCode 配置
配置 ESLint

WebStom设置React Native代码提示

  • 从gitHub上下载xml插件
    git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

  • 安装
    将ReactNative.xml复制到 ~/Library/Preferences/WebStorm10/templates ，然后重启 WebStrom。

  • 在 webstorm 中进行调试

或者 sublime 来配置成 IDE 开发

主要是代码提示
参考安装各种

环境搭建

tips
可以一起装了这些环境~!!!

npm 环境

依赖 npm 的环境, 至于更换环境, 可以使用
国内快速使用 npm 的方式 / 依赖升级检查

  • 安装 Node.js, 成功后自带有 npm,
1
brew install node  # 需要升级的话就 `brew upgrade node`

安装 JAVA
没装的用brew 装一个新的就行了: brew cask install java 一半是 JAVA8(目前)

当然, 作为开发人员, 估计是早就装了的

  • 安装WatchMan
    WatchMan是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
  • 安装Flow
    flow是一个 JavaScript 的静态类型检查器。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。
1
brew install watchman flow

React Native安装

  • Yarn、React Native的命令行工具（react-native-cli）
    Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
1
npm install -g yarn react-native-cli

warning: 虽说在安装yarn的时候, 提示说你可以用本地安装的方式, 但是这个会自动安装Node.js, 而且不是 NVM 管理, 鉴于现在很多资料都是以 NVM 来做的, 所以还是选择 NVM 管理比较好. 使用本地安装可以使用: brew install yarn --without-node, 但还是直接用 npm 来安装好了

React-Native 的更新

1
npm update -g react-native-cli

安装 iOS 和 Android 的 IDE

  • iOS: XCode
  • Android: Android Studio

    Android 安装配置: Custom -> 勾选Performance和Android Virtual Device -> Configure -> SDK Manager -> SDK Platforms -> Show Package Details -> 然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository。

ANDROID_HOME环境变量
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中，使用 vi ~/.bash_profile。
如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk
然后使用下列命令使其立即生效：
source ~/.bash_profile
可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

安装安卓模拟器

使用 genymotion 会更好

1
brew cask install genymotion

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

1
touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

换源

npm 的源是在国外的, 众所周知, 我们最好换源.
参考
国内参考

可以使用 taobao 封装的工具: cnpm

源管理器

nrm : 帮组管理 npm 的源

1
npm install -g nrm

其中说到要使 yarn 也使用私有源, 可以再 yarnrc 里添加设置源的代码

介绍

什么是React-Native

它是一个灵活高效的创建 UI 的 js 库, 将各个 UI 的部分进行组件化, 运用一些 XML 类型的标签来告诉 React 需要渲染什么, 当传入这组件内的数据发生变化时, 会立即更新对应的组件的 UI

通过 render 方法返回一个带参数的 view, 里面的参数称之为 props

render 方法返回一个 React element 的描述, 然后把这些渲染上去, React element是轻量的, 开发者用一种叫 JSX 的语法来轻松构建这些结构,

等这些标签会被转化为 React.createElement('div') 这些语法, 这是在 API 层面的语法, JSX 就类似语法糖. 可以直接用标签就能方便的写出 UI 来

JSX

是 JS 的语法扩展, 建议使用他来写 React 的 UI 和组件, 他会提供一些模板, React 会将它编译成 js, 所以它和 js 协同并不会有什么冲突.

  • 可以在花括号{}中内嵌 js 表达式,
  • 可以像 XML 一样在标签中设置属性, className=”类名” onclick={() => alert(‘ok’)
  • 对 onclick 相当于一个属性 prop来解析
  • 可以在 construct() 函数中定义一些对组件来说是私有的属性, 状态, 将存储在 this.state 中:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}
  • 里面更推荐使用 immutable 的方式来改变数据, Immutability Is Important, 因为如果一个数据被直接改变了, 检测他的改变就要遍历其中的每个对象, 而这个是很耗时的. 而通过先把数据 copy 一个出来, 修改了的话通过对比两个对象很容易就能得出改变这个结果.
  • 在渲染一些 list 的时候, 需要设置一个 key, 用以标识当前的标签, 区别于其他同级标签. <li key={user.id}>{user.name}: {user.taskCount} tasks left</li>, key是 React 内建的一个特殊的属性, 但创建这个元素的时候, React 会定位这个key, 并在 return 这个标签的时候直接存储, 虽然看起来像一个 prop, 但是在this.props.key中是拿不到这个 key 属性的. 当 React 决定那个子标签需要刷新的时候, React 会自动拿到这个 key, component 没有方法去拿到自己的 key, 这里强烈建议, 当你创建一个动态的 list 的时候, 都加上这个 key
  • React 会检查这些 key, 一个key 添加的时候, 一个 component 就创建了, 但 key 移除的时候, component 就会被销毁, 如果 key 改变了, 这个 component 就会销毁, 然后重新创建.
  • 如果没有指定一个 key, React 会 warn 你, 并fall back 使用数组的下标来作为 key, 在某些情况下这是不正确的: 当你重新排列你的 list 时; 当你不是在底部给一个 list 添加一个元素时.
  • 如果显式的声明key={i(下标)}, 虽然不会有 warning 了, 但问题还是存在. 所以大多数时候不推荐这种方式.
  • component 的 key, 不需要全局唯一, 在其 list 的兄弟元素中唯一就行了~

Functional Components

通过声明函数的形式来声明一个 Component, 里面只需要考虑render这个方法, 对比声明一个React.Component的子类, 声明一个带 props 的参数, 返回一个想要 render 的东西的函数要更简单.
你需要把出现 this.props 的地方改成 props, 很多在你 APP 中的 component 能够作为 function 的形式来写, 而且以后 React 会充分利用这种形式.

我们还需要把onClick={() => props.onClick()}改成onClick={props.onClick}, 注意: 不能写成onClick={props.onClick()}, 带了括号之后, 在解析这个标签的时候就会立即执行函数了

构建一个项目

使用 React 来初始化一个项目

1
react-native init <项目名称>

然后里面就会有 iOS 和 Android 两个平台的项目文件夹, 其他的就是React 需要用到的东西了, 包含 React Native 框架文件

运行工程文件

在开发调试阶段, 需要启动一个 http 服务, 来对应对应的修改会及时的显示在运行上, 称为: Debug Server, 在8081端口, App 通过声明函数的形式来声明一个Server 加载 js.

运行 iOS

直接使用 XCode 运行时没有出现什么太多的问题
再 run 的时候会运行js 的东西, 可能是运行起 Virtual Dom, 将 js 中的组件转换成 Native 的组件

升级或者降级npm包的版本

npm install --save react-native@0.18

运行再Expo 应用中

expo 是提供一个 app的壳, 可以将你的代码运行在里面, 可以不依赖与 IDE 环境, 也就是说, 不用起 XCode或者 Android Studio, 直接在手机上安装应用就能看到自己的代码, 或者直接跑模拟器

对应平台的效果

  • iOS
    打开对应 IDE 来查看对应的模拟器. 就像之前各自开发的那样, 只是 React 会把写的 js 文件编译成对应平台的代码

运行成功后在通过命令行直接 react-native run-ios 可以直接跑通, 估计是前面的 js 安装没弄

使用 create React Native app:
在真机上跑成功, 运行到模拟器时不能安装上去

Styled Components

一个给在 js 中使用的生成一个 CSS 的一个库, 其可以 i 直接在写 component 的时候声明一个 styled.
styled.组件名: 生成的就是一个这个 CSS 样式的组件便签, 是简单的标签, 目前只看到可以包裹一个东西, 然后里面家就是这个 CSS 样式生效的东西
styled(组件名): 生成在这个组件的基础上生成的适用这个 CSS 样式的标签, 相当于把这个(组件)包含到设个样式的标签中

Prop 属性

构建组件

因网上很多教程, 这里就不一一赘述了, 这里只记录比较值得记录的, 自己比较弱项的东西

view 组件中的属性

return(这里只能有一个 view, view 里可以嵌套多个 view), 只能 return 一个 view component

每个标签中有一个 prop 属性来指定使用的样式: style={},
每个组件(标签)都可以用各种属性来进行定制, 其中: {}是对象传值必须的, 里面传递的是一个对象

其中 style 就是设定这个组件样式的属性
虽然可以在style 中传入 CSS 类似的参数, 但是还是在 styleSheet 中写好参数会更好维护和可读

使用 Flex 布局能更好的适应不同屏幕上的组件排列

Flex 布局

Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间

React native中的FlexBox是这个规范的一个子集。

大部分是处理组件流式布局的方式

Flex 解决的问题:

  • 浮动布局
  • 各种机型屏幕的适配
  • 水平和垂直居中
  • 自动分配宽度

轴

容器中默认x 轴为主轴, y 轴为交叉轴

items 默认沿主轴排列

关于 Flex 的属性

对于容器 container 中的 Flex 属性

  • 设定主轴方向
    flexDirection: row | row-reverse | column | column-reverse
  • 设定主轴方向上 items 的排列方式
    justifyContent:flex-start | flex-end | center | space-between | space-around
  • 定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。
    alignItems: flex-start | flex-end | center | baseline | stretch

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flexWrap: nowrap | wrap | wrap-reverse

对于 item 自己的 flex 属性

item 自己的 flex, 是在 container 设置了 Flex 的基础上, 相对于同级的其他 item 的排列方式

  • flex, 主要设置主轴方向上的相对排列
    “flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写， 其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。
    默认值为“0 1 auto”。
    宽度 ＝ 弹性宽度 * ( flexGrow / sum( flexGorw ) )

  • alignSelf: 主要设置交叉轴的上的相对排列
    alignItems: flex-start | flex-end | center | baseline | stretch

在React Native 中使用 Flex

获取屏幕宽高, 分辨率

1
2
var Dimensions = require('Dimensions');
var {width, height, scale} = Dimensions.get('window');

组件

Text: 有很多属性设置 text 的表现方式, 具体直接看文档

Image

从当前项目中加载图片

1
<Image source={require('./img/2.png')} style={{width: 120, height: 120}}  />

该图片资源文件的查找和JS模块相似，该会根据填写的图片路径相对于当前的js文件路径进行搜索。
此外，React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。

加载使用APP中的图片

1
<Image source={require('image!icon_homepage_map')} style={{width: 50,height:50}}/>

使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)

实时通过网络进行获取的，写法和上面的加载本地资源图片的方式不太一样，这边一定需要指定图片的尺寸大小

1
<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.cover 或者 Image.resizeMode.contain 或者 Image.resizeMode.stretch}}/>

组件的触摸事件

Touchable

  • TouchableHighlight
    • activeOpacity
    • onHideUnderlay
    • onShowUnderlay
    • style
    • underlayColor
  • TouchableOpacity
    • activeOpacity
    • onPress
    • onPressin
    • onPressout
    • onLongPress