React Native入门

抽时间学习一下React Native.

React Native 简介

环境搭建

• 安装Node.js
  下载node.js：https://nodejs.org/en/download/
  或者安装brew来安装node.js.
  node -v最新的版本
• 安装React Native
  先通过HomeBrew安装watchman和flow
  brew install watchman
brew install flow
  再通过npm安装react-native-cli的工具
  sudo npm install -g react-native-cli
• 使用NVM来管理node.js版本
  git clone https://github.com/creationix/nvm或者git clone https://github.com/cnpm/nvm
• 创建项目
• 安装命令行工具：sudo npm install -g react-native-cli
• 创建项目Hello：用react-native init命令react-native init Hello，打开Xcode文件后运行，自动启动终端和模拟器。然后模拟器就出现了字，显示成功。

在安卓上运行的环境配置

基础软件安装

1. 安装JDK jdk-8u101-macosx-x64.dmg

   • 查看版本，命令行中运行javac -version

2. 安装Android Studio

   • 勾选Performance和Android Virtual Device
   • 安装相关SDK Platforms，记得勾选Show Package Details
   • 安装SDK Tools 必须是这个版本 Android SDK Build-Tools 23.0.1，记得勾选Show Package Details。
   • ANDROID_HOME环境变量设置。（见下面 环境变量配置）方法
3. 安装 免费VirtualBox虚拟机
4. 安装模拟器Genymotion
   • 注册帐号
   • 下载Genymotion
   • 安装Genymotion

坑： brew install android-sdk不支持了。
应该先用brew tap caskroom/cask
再用brew cask install android-sdk还有brew cask install android-platform-tools

环境变量配置

1. 把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。

在~/.bash_profile中添加(如果你安装的 ZSH 则在 ~/.zshrc中添加)：

export ANDROID_SDK_ROOT=/Users/peilinghui/Library/Android/sdk 
PATH="/usr/local/share/android-sdk/platform-tools:${PATH}"

改完需要运行source ~/.bash_profile （注意：你的SDK的具体路径可能不同）

2. 必须在Android studio中配置SDK的环境地址，然后下载component的相关东西。
3. 在genymotion中的setting-ADB-设置SDK的地址为你配置的地址。一定要重启genymotion！！！一定要重启！一定要重启！！重要的事情说三次，因为没重启一直不成功。。

在执行react-native run-android一直不成功的时候，一直说是

* What went wrong:
Execution failed for task ':app:installDebug'.
com.android.builder.testing.api.DeviceException: Could not create ADB Bridge. ADB location: /Applications/ADT/sdk/platform-tools/adb

的报错，然后按上面3就解决了，然后或者在Android文件夹下app/build/outputs/apk,drag the app-debug.apk to the genymotion.now it works。

GET IT！

2. 测试服务端

这时候可以用浏览器访问
http://localhost:8081/index.android.bundle?platform=android
如果可以访问表示服务器端已经可以了。

debug的方式

在模拟器上点击commend+D，出现下面的界面。开始调试。

1. reload：刷新页面，只有修改了JS文件的时候刷新有效。
2. Debug Remote JS主要是在chrome上，开发者工具(Commod)
   APPdelegate中改bug，打开注释，进行debug。或者使用工具nuclide。
3. Enable Live Reload：自动刷新，

   React Native组件

   React JS
   React Native
   nuclide插件

Render&JSX

render() {
  const txt = 'Hello';
  function say(name){
    return 'I am '+name;
  }
  return (
    <View>
      <Text>This is a title!</Text>
      <Text>{txt}</Text>
      <View>
      	<Image source={require('./img/bg.png')}>
          <Image source={require('./img/icon.png')}/>
        <Text>{say('React')}</Text>
      </View>
    </View>
  );
}

组件生命周期

1. 初始化
   • getDefaultProps
   • getInitialState
   • componentWillMount
   • render
   • componentDidMount

2. 运行时

   • componentWillReceiveProps

   • shouldComponentUpdate

     shouldComponentUpdate(nextProps, nextState) {
     return nextProps.id !== this.props.id;
     }

   • componentWillUpdate

   • render
   • componentDidUpdate
3. 销毁
   • componentWillUnmount
     更多：https://race604.com/react-native-component-lifecycle/

     Props & States

4. Props:properties属性，在初始化的时候传入并且可以显示不同的状态。
   props不可变
   states不可变

可以在浏览器中debug

Styles

flexbox布局

可以开发出动态宽高自适应的UI布局。
位置：position。取值为relative或者absolute。当设置为relative的时候，是表示当前组件距离上一个同级组件的距离。当设置为absolute的时候，是表示当前组件距离父组件的距离来描述位置top,bottom,left,right.与宽高相关的有：width，height，maxheight，maxwidth，minheight,minwidth。

排列子组件

优点Lbuxuyao指定子组件的绝对位置，也不需要根据运行时屏幕大小动态计算子组件的大小，而是通过排列一个个长方形来进行布局。

flexDirection
决定了组件内部的子组件是如何排列的。row、row-reverse、column、column-reverse。

flexWrap
flexWrap取值为warp，并且alignItem键不能取值为”stretch”的时候才能实现子组件的自动换行排列。

justifyContent
定义在一个方向上如何排列子组件，flex-start、flex-end、center、space-between、space-around 。

alignItems
定义了view组件中所有子组件的对齐股则。flex-start（顶部对齐）、flex-end（底部对齐）、center（中部对齐）、stretch（拉长对齐）。

边框border，空隙margin，填充Padding

Absolute & Relative

Size & Dimensions & onLayout

Architecture

MVC的问题：

Redux

学习资料

React-Native学习指南
gitbook—–
对应的视频
React Native学习资源精选仓库
博客