官网 和 中文网

---

你将学到如下知识点：
1、如何安装React 和一些包。
2、如果创建一个工程。
3、react 的提示插件。
4、react Native的常用组件--- View 、Text
5、react Native 的常用属性布局 --- flexbox
6、react Native 的样式写法。

---

1、安装：

必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 Xcode。

2、Node, Watchman

我们推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装：

brew install node
brew install watchman

如果你已经安装了 Node，请检查其版本是否在 v8.3 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

[Watchman](https://facebook.github.io/watchman)则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

3、Yarn、React Native 的命令行工具（react-native-cli）

[Yarn](http://yarnpkg.com/)是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

     npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源：

       yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

 Xcode 的安装

创建新项目

• 使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：

• ！！！注意！！！：init 命令默认会创建最新的版本，而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目！！！中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦，又没有对新版本的需求，那么可以暂时创建0.44.3的版本。

react-native init AwesomeProject

编译并运行 React Native 应用

在你的项目目录中运行react-native run-ios：

cd AwesomeProject
react-native run-ios

react-native run-ios只是运行应用的方式之一。你也可以在 Xcode 或是Nuclide中直接运行应用。

4、修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

使用你喜欢的编辑器打开App.js并随便改上几行。
在 iOS 模拟器中按下⌘-R就可以刷新 APP 并看到你的最新修改！

ReactNative面向组件开发的！

1、查看版本：

npm info react-native

更新本地版本：

例如：

• npm info react-native(目前是0.50.0)
• 知道最新版本后，通过以下命令来安装：
• npm install --save react-native@0.50.0

2、提示插件和使用教程

• 教程

• 它和前端的页面写法一样 css和 js 分离

import './App.css'; // 引入 css样式文件

class App extends Component {
 // 初始化方法(渲染)
 render() {
 // 返回
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
          <p>你好！！！</p>
      </div>
    );
  }
}

注意：ReactNat 的写法和移动web的基本一样。只是移动web的属性如果要添加 ‘-’ 在ReactNative里就去掉，采用驼峰命名。

例如：font-Size =12px ,在RN里就是：fontSize: 12

React Native 常用组件 —— View

• JSX : react Native 发明的。作用是便读写，打包阶段会编译成 JS代码。

属性：

• View 的组件是RN 的所有组件的父组件。
• 相当于 IOS 的UIView 和 Android 的 Android.view

布局：（常用）

Flexbox 弹性布局

Transforms 动画属性

backfaceVisibility enum('visible','hidden') 定义界面翻转的时候是否可见

opacity: number 透明度（0~1）

overflow enum('visible','hidden') 设置内容超出内容部分是显示还是隐藏

elevation number 高度 设置Z轴，可生产立体效果

基本样式的使用：

 // 相当于 OC里的View
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>你好, 和哈 App.js</Text>       
      </View>
      
 // 添加 样式
 // 创建样式  StyleSheet.create({})
 const myStyles = StyleSheet.create({
   container:{('text to find')},
   welcome:{},
   instructions:{}
 })

注意：上面的<View><View>不能有同级。只能是子级存在！！！

flex Box弹性布局

• 在ReactNative中，直接在父项 和 子项使用 flex: 就可以了。使用dislplay:flex就报错（语法错误）。移动web的话要设置：给父元素 div 设置dislplay:flex; 即可将其变为弹性布局。
• 在css 中，常规布局是基于块和 内联流方向，而Flex布局是基于flex-flow流。
• 组要在移动端开发中使用该技术。

Flexbox的常用属性

默认是垂直的（主轴）.png

• 它和H5和CSS3的中使用开发移动web的方式基本相同，但是写法又有点区别。

• 例如：flexDirection：默认是主轴为垂直方向 column；写样式时 属性后面的值 不写单引号或双引号时就会报错。

• 写flex 占的份数时，使用 flex

   oneView: {
        flex:1,     // 
          width:100,
          height:100,
         flexDirection: 'row',  // 改变主轴的反向(默认是column)
          backgroundColor:'red'   // 使用 单引号或双引号
      }
  

  • 注意：RN的写法和 移动Web的写法不一样！

  • 移动web的写法（以下由6个属性是对父元素设置的）

    0.移动web 的 主轴方向默认是：row的，ReactNative 默认是 column
    1. flex-direction 设置主轴的方向
    2. justify-content 设置主轴上的子元素排列方式
    3. flex-wrap 设置子元素是否换行  
    4. align-content  设置侧轴上的子元素的排列方式（多行）
    5. align-items 设置侧轴上的子元素排列方式（单行）
    6. flex-flow 复合属性 相同于同时设置了  flex-direction 和  flex-wrap
       - flex-flow：<' flex-direction '> || <' flex-wrap '>
    

    • ReactNative的写法：

    0.移动web 的 主轴方向默认是：row的，ReactNative 默认是 column
    
    1、flexDirection: 主要设置主轴的方向： row、column（默认）、row-reverse（从右到左）
    2、justifyContent: 设置主轴下的 子项的 布局方式：flex-start、flex-end、center、space-around(平分剩余空间)、space-between（先两边再评分剩余空间）
    3、alignItems:
    4、flexFlow:
    5、flexWrap:
    

    其实就是结合起来写（去掉 ‘-’，驼峰命名）

  总结：
      0.分主轴和侧轴。
      1、flexDirection：先看父项的主轴方向。是row 还是 column。
  
      2、justifyContent：再 看 主轴方向里的 子项的 布局方式。(lex-start、flex-end、center、space-around(平分剩余空间)、space-between（先两边再评分剩余空间）)
          3、alignItems: 设置侧轴上的子元素排列方式(单行)
          3.1、alignContent: 设置侧轴上的子元素的排列方式(只能多行) flex-start、flex-end、flex-center、space-around、space-between
          flexFlow、
          flexWrap 等。
  
  

  设置属性为row.png

1. flex 元素属性

• flex： “flex-group”、“flex-shrink”、“flex-basis” 三个属性的缩写，其中第二个和第三个参数 （flex-shrink、flex-basis）是可选参数。
• 宽度 = 弹性宽度 * （flexGrow/sum(flexGorw)） 或者是以 百分比的形式来使用。说白了就是： 子项的宽度 = 父元素宽度 *（ 子项的flex / 总的flex数 ）
• 总结：flex 就是用来设定宽度的！！！

2. align-self 控制子项自己在侧轴或主轴的排列方式

• align-self的优先级比align-items,align-content 高

3. flex设置子项宽度占父元素宽度的比例

• 当子项指定了width时无效。

弹性布局总结：

• 子项可以直接设置宽高。

• 子项不受浮动影响，但受定位的影响。

设置align的方向.png