我的React-Native不得不说的一些事情－1

创建文档时间：2016.3.19-23:18
作者：三月懒驴
使用平台：Mac

1. 安装

//前提：安装node 再安装react-native命令行工具
npm init  //随便填写回车下去。
npm install -g react-native-cli
//不用翻墙的安装方法
mkdir react_native
cd react_native
npm install react-native --save
node -e "require('react-native/local-cli/cli').init('.','MyProject')"
//翻墙的可以这样：
react-native init
//运行:Mac
在项目文件里面的IOS文件夹用Xcode打开MyProject.xcodeproj，在Xcode里面运行  

2. 组件

组件这个概念是非常棒的！下面我们来看看react-native自带的一些组件。 这里面只说部分我自己用过的，基本都是IOS平台的一些自带组件

• ActivityIndicatorIOS (加载那个菊花)

• DatePickerIOS （日期选择器）

• Image （图片）

• ListView（重点:列表）

• MapView （地图）

• Modal

  （Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。）

• Navigator(重点：导航器)

• PickerIOS （选择器）

• ProgressViewIOS (进度条)

• RefreshCortrol

  这一组件用在ScrollView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。

• ScrollView （重点：可滚动视图）

• SegmentedControlIOS （分段选项：就是在一行有多个选项）

• SliderIOS (可拉动的滑块：就像视频进度条那种滑块)

• StatusBar

  StatusBar组件可以同时加载多个。此时属性会按照加载顺序合并（后者覆盖前者）。一个典型的用法就是在使用Navigator时，针对不同的路由指定不同的状态栏样式，

• Swicth (开关)

• TabBarIOS / TabBarIOS.Item (重点，就像微信底部那个)

• Text (基础)

• TextInput (输入框)

• View （基础）

• WebView (网页)

• Touch系列的

  • TouchableHighlight
  • TouchableOpacity

3. API

• ActionSheetIOS (底部弹起的菜单)

• Alert / Alert (提示框)

• Animated (动画)

• AppRegistry

  是JS运行所有React Native应用的入口。应用的根组件应当通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包并且在启动完成之后通过调用AppRegistry.runApplication来真正运行应用。

• AppState / AppStateIOS

  能告诉你应用当前是在前台还是在后台，并且能在状态变化的时候通知你。AppState通常在处理推送通知的时候用来决定内容和对应的行为。

• AsyncStorage

  AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。就像H5里面的LocalStorage

• CameraRoll (访问本地相册功能)

• Dimensions (重点：获取屏幕高度)

• InteractionManager

  Interactionmanager可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证JavaScript动画的流畅运行。

• LayoutAnimation (当布局变化时，自动将视图运动到它们新的位置上。)

• Linking / LinkingIOS

提供了一个通用的接口来与传入和传出的App链接进行交互。如果想要在网页中告诉系统要打开你的APP，可以使用这个

• NativeMethodsMixin

  提供了一些用于直接访问底层原生组件的方法。这在你需要聚焦(focus)一个视图或者计算它在屏幕上显示的尺寸之类的情况下可能会需要。

• NetInfo (获知设备联网或离线的状态信息。)

• PanResponder

  可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作，也可以用于识别简单的多点触摸手势。

• PixelRatio (重点：像素密度)

• PushNotificationIOS (重点：推送)

• StatusBarIOS (设置iOS状态的显隐与样式)

• StyleSheet (重点：CSS)

• VibrationIOS (控制设备震动)

4. 课间总结

上面一共介绍了20多种组件和API。而实际上，我们初学者可以把他们分为几类。基础，重点和额外。基础是必须掌握的，重点是在应用中普遍用到的，而额外的话是根据实际使用情况使用。

• 组件
  基础：View，Text，TouchableHightLight，Image，TextInput
  重点：ListView，Navigator／StatusBar，TabBarIOS／TabBarIOS.Item，ScrollView／RefreshCortrol
  额外：剩下的那些

• API (API这些其实都需要认识一下，用的时候难度不大，所以这里就总结出一个常用的出来)
  常用 ： StyleSheet , PixelRatio , Dimensions , Animated , AppRegistry

5.编程

5.1 进入Hello World！编辑：index.ios.js

'use strict'
//下面要做三件事：引入模块，定义一个组件，把组件注册到APP去。
//但是为了让视觉好看点，我们要用styleSheet来进行布局，
//因此在定义组件之后，我们可以定义一个样式对象，再进行注册到APP去

//1.引入模块（PS：0.2之后全面使用ES6语法了）
import React from 'react-native'
let {AppRegistry,Component,StyleSheet,Text,View} = React;

//2.定义组件
class MyProject extends Component{
    render(){
        return(
            <View style={styles.body}>
                <Text style={styles.text}>Hello World!</Text>
            </View>
        )
    }
}

//3. 定义样式对象
const styles = {
    body:{
        flex:1,//让内部元素都带有相同的长度，忽略它们的内容：
        justifyContent:'center',//内部元素在主轴上的对齐方式。
        alignItems:'center',//内部元素在交叉轴上如何对齐。
        backgroundColor:'#ccc',
    },
    text:{
        fontSize:20,
        textAlign:'center'
    }
}

//4. 注册:这里的第一个参数是你生成项目时候起的名字，
//第二个参数是ES6的箭头函数。()=> XXX 等价 function(){}
AppRegistry.registerComponent('MyProject',()=> MyProject);

5.2 的进阶：把组件分离出去

//touch component.js －－》新建一个文件
把上一个例子的组件部分代码分离出来
//in component.js
'use strict'
import React from 'react-native'
let {StyleSheet,Text,View} = React
export default class Test extends Component{
render(){
    return(
        <View style={styles.body}>
            <Text style= {styles.text}>Hello World！</Text>
        </View>
    )
}
}
let styles = {
 body:{
     flex:1,
     justifyContent:'center',
     alignItems:'center',
     backgroundColor:'#fcfcfc',
 },
 text:{
     fontSize:40,
     textAlign:'center'
 }
}
//in index.ios.js

'usr strict'
//1.引入模块和组件
import React from 'react-native'
import TestComponent from './component'
let {AppRegistry,Component,StyleSheet,Text,View} = React;

//2.定义组件
class MyProject extends Component{
    render(){
        return(
            <TestComponent />
        )
    }
}

//3. 注册
AppRegistry.registerComponent('MyProject',()=> MyProject);

未完待续...