ReactNative入门
官网 和 中文网
你将学到如下知识点：
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
