Tag: React Native | 大排档

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

IOS、Android的图标、app名称和启动图

一、App名称修改
    Xcode中打开项目下info.plist -> Bundle name 和 Bundle display name 都修改APP的名称
二、App图标
    方法1 Xcode中配置:
        Xcode工程目录下的Images.xcassets -> AppIcon中将来加载图标，分别为120x120、180x180
    方法2 代码中配置
        1、使用icon psd模板右键 Edit me and save图层 ——> 编辑内容 ——> 编辑完后保存 ——> 导出图片（窗口）——> 动作 ——> 右上角按钮选择载入动作将App Icon Template [3.3].atn文件载入 ——> 选择导出动作中有两种一个都是圆角图标一个是方形图标
        2、将导出的图标添加到项目中 找到ios/gzApp/Images.xcassets ——> 将所有导出的图标放到这个目录下
三、设置启动图
    方法1 Xcode中配置:
        Xcode工程下点击Images.xcassets -> 进入后 右键 App Icons & launch Image -> New IOS Launch Image -> 将启动图加载到各配置中（注意如果尺寸与当前不配置编译时会报错）
        在项目的General面板 Launch Images Source 选择刚才创建的launchImage, launch Screen File设置为空，App Icons Source就是图标的配置
    方法2 代码配置
        https://github.com/fbsamples/f8app/tree/master/ios/F8v2   // Base.lproj -> LaunchScreen.xib
        在ios文件夹 -> gzCar项目 -> Base.Iproj -> LaunchScreen.xib 使用文件替换，将Splash.png文件导入到项目中，启动
http://www.cnblogs.com/allenxieyusheng/p/5802179.html
http://www.jianshu.com/p/adpKye/
https://appicontemplate.com/ios9    图标尺寸导出  
转icon尺寸
http://www.zcool.com.cn/article/ZNjE1MTI=.html
http://makeappicon.com/
http://blog.csdn.net/leiyu231/article/details/52830151

fetch 请求提示netWork quest failed

在 Xcode 7.0 bata、ios9 中fetch默认https请求, 对http不起作用，需要修改info.plist配置
1、在Info.plist中添加 NSAppTransportSecurity 类型 Dictionary ; 
2、在 NSAppTransportSecurity 下添加 NSAllowsArbitraryLoads 类型Boolean ,值设为 YES;
http://blog.csdn.net/liyijun4114/article/details/51792179

网络图片无法加载问题

在iOS9之后，网络请求默认为Https请求，如需支持Http，修改info.plist文件添加键值对设置允许http访问。
在App Transport Security Settings中添加 Allow Arbitrary Loads设置为 YES

内测平台

https://www.pgyer.com/      蒲公英将测试包分发给多人的设备上进行测试
    在Xcode中倒出一个应用包，通过蒲公英上传进行分发多个设备
https://developer.apple.com/  苹果开发者账号申请
苹果开发者平台可以进行
苹果的安装包为 *.ipa 文件
1、先登录Account，注册苹果开发者账号个人或企业
2、Xcode 打包IOS文件 https://www.pgyer.com/doc/view/app_upload

代码类

一、render中调用方法将View返回
    class TabPage extends Component {
        _createNav(name, colorValue){
            return (
                    <Text style={{color: colorValue}}>{name}</Text>
                </View>
        render(){
            return (
                    {this._createNav('siguang', '#ddd')}
                </View>

| 参考资料
| react.parts/native
|

Enable Live Reload 实时加载，应用于更新时需要刷新当前页面，可以看到全局刷新效果 Enable Hot Reloading 热加载，当布局修改时会自动更新模拟器，看不出来刷新效果类似买局部刷新三、React Native 应用部署/热更新 codePush http://blog.csdn.net/fengyuzhengfan/article/details/52003798

安装

1、安装 XCode
    $ xcode-select --install  检查xcode是否安装, 如果未安装会出现提示
    android 下载 android studio  https://developer.android.google.cn/index.html
2、安装 homebrew
    用于包管理，与npm类似
    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    $ sudo chown -R `whoami` /usr/local   解决/usr/local目录不可写的权限问题  
    Homebrew将工具安装到 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接。
3、安装 watchman 和 flow
    watchman是facebook的开源项目用于监视文件并且记录文件的改动情况
    flow 是js的静态类型检查器，用于找出js代码中的类型错误
    $ brew install watchman
    $ brew install flow
4、安装 NodeJS
5、安装 react-native 
    $ npm install -g react-native-cli      // Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载
6、vscode中react-native插件

初始化项目

1、创建项目
    $ react-native init 项目名  // 创建项目
    $ react-native run-ios     // 运行 react-native run-ios --simulator "iPhone 4s"  定义模拟器类型
        或者在ios目录 AwesomeProject.xcodeproj  双击打开
2、查看命令
    $ react-native -h   所有命令
    $ react-native -v   版本
3、安装第三方插件
    $ npm i react-native-elements lodash query-string sha1 react-native-audio react-native-video react-native-image-picker react-native-progress react-native-sk-countdown react-native-swiper react-native-barcodescanner --save
4、link 命令
    link的原因：以下组件都是原生开发，wrapper了一层js，因此需要link .a到project中
    $ react-native link
    或 rnpm link     需要先安装rnpm     npm install rnpm -g --save-dev
5、模拟器调试技巧
    http://blog.csdn.net/quanqinyang/article/details/52215652  
    # 模拟器打开后可以通过cmd+1/2/3/4来调整窗口大小
    # 模拟器在所有窗口置顶 window -> stay in front
    # ISO cmd + D 打开调试菜单，Android cmd + M
    # comond + T  show Animate 呼出菜单cmd+D会变成慢动画
    # Reload 重新bundle代码 cmd + R
    # Debug JS Remotely   调试模式 chrome Developer Tools调试
    # Enable Live Reload  实时加载，应用于更新时需要刷新当前页面，可以看到全局刷新效果
    # Enable Hot Reloading   热加载，当布局修改时会自动更新模拟器，看不出来刷新效果类似买局部刷新
        红错误 - console.error('')
        关闭警告 - console.disableYellowBox = true;    显示警告 - console.warn('YellowBox is disabled.');
    # 日志 - react-native log-ios      react-native log-android
    # chrome开发工具 - debug js Remotely  可以跟进代码

react-native 目录

.
├── .DS_Store
├── .babelrc            // ES6转换的配置
├── .buckconfig
├── .flowconfig         // 做js代码类型检查 
├── .watchmanconfig     // 监听文件改变watchman的配置
├── .gitattributes
├── .gitignore          // 对哪些文件被git忽略不显示
├── node_modules        // 存储资源包    
├── __tests__
├── android             // android原生文件目录
├── ios                 // ios的原生文件目录 运行reactNative会将文件打包到这个目录，然后xcode调用的就是这里的项目文件
├── app.json
├── index.android.js    // android文件入口
├── index.ios.js        // ios文件入口
├── package.json        // 依赖文件
└── yarn.lock

AppRegistry 注册模块，用来告诉RN哪个组件被注册为根窗口

AppRegistry是js运行RN应用的入口，通过registerComponent()来注册方法
AppRegistry.registerComponent('项目名', () => 入口组件名)  注册入口
AppRegistry.runApplication 来真正运行应用

React Native 生命周期

第一阶段，初始化
    getDefaultProps -> getInitialState -> componentWillMount -> render -> componentDidMount
       获取配置参数        获取初始状态值         通知要开始渲染        渲染       告诉组件已经完成
第二阶段，运行阶段 组件运行中
    1、state变化 -> shouldComponentUpdate -> componentWhllUpdate ->  render -> componentDidUpdate
       状态变化    判断组件是否要更新true/false     需要更新就触发           渲染         更新组件
    2、props变化 -> componentWillReceiveProps -> shouldComponentUpdate -> componentWhllUpdate ->  render -> componentDidUpdate
       props变化         属性改变调用             判断组件是否要更新true/false       需要更新就触发        渲染           更新组件
第三阶段 卸载
    unmount -> componentWillUnmout -> 结束 
props、state
一、props属性: 父组件传值给子组件
    <Greeting name='Rexxar' />      父组件调用子组件
    <Text>Hello {this.props.name}!</Text>   子组件接收
    1、defaultProps定义默认的props
        class Smiple extends Component{
            static defaultProps = {     // 定义默认props静态属性
                name: 'siguang'
            static propsTypes = {       // 检测props的类型
                name: 'String'
            render(){
                return (
                        <Text> {this.props.name} </Text>
二、state状态、setState()改变状态，组件中可以改变的值
    export default class rrdProject extends Component {
        constructor(props){
            super(props);
            // 定义state对象
            this.state = { 
                showText: ''
        // state = {  };     // RN也支持ES7 类的静态属性写法
        render() {
            return(
                <View style={styles.container}>
                    <Text>这里有内容: {this.state.showText}</Text>
                </View>
ref
通过ref来获取真实的DOM
import childComponent from './childComponent';
class Simple extends Component {
    clickChild(){
        var size = this.refs.childRef.getSize();       // 获取childComponent组件的getSize()方法
    render() {
        return (
                <Text>Simple 基本页面</Text>
                <button onPress={this.clickChild} title="点击" />
                <childComponent ref="childRef" />
            </View>
样式
http://blog.csdn.net/sbsujjbcy/article/details/50017029
http://www.cnblogs.com/wonyun/p/5481134.html
1、直接写样式
    <View style={{width: 193, height: 110}}></View>     {{}} 两个括号可以直接写样式
    <View style={styles.red}></View>                    {} 一个括号需要来调用样式类
    const styles = StyleSheet.create({
        red: {
            color: red
2、写多个样式
    <Text style={[styles.btn, styles.color]}>立即体验</Text>
    // 支持表达式
    <Text style={[styles.btn, styles.color && this.props.dotColor]}>立即体验</Text>
2、styleSheet.create({}) 定义样式
    const styles = StyleSheet.create({
        rootView:{
            height: '100%',
            width: '100%',
            backgroundColor: '#eff0f3'
        big: {
            color: 'blue',
            fontSize: 30
    <View style={styles.rootView}>      // 多个样式 style={[styles.rootView, styles.big]}
        <Text>REACT NATIVE ELEMENTS</Text>
    </View>
3、颜色支持
    '#ccc'、 'rgba(0,0,0,.4)'、 'transparent'、 'red'
4、RN样式与css样式的异同
    View类型div，会默认占用窗口的100%宽度
    绝对定位和相对定位不需要父元素设置positioin，也没有zIndex配置
    不能将RN的inline元素设置maginTop、marginBottom
    样式继承只存在Text元素内的Text元素
        <Text style={{color:'red'}}>
             <Text>父：我是white还是red{'\n'}
                 <Text>子：那我是神马颜色</Text>
             </Text>
       </Text>
Flex布局
直接给组件指定宽、高   <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
http://www.devio.org/2016/08/01/Reac-Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/#和而不同
一、父视图属性:
    1、flexDirection('row', 'column','row-reverse','column-reverse')- 布局子元素的排列方向，默认是column不是row
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{flex:1, height: 50, backgroundColor: 'powderblue'}} />
            <View style={{flex:2, height: 50, backgroundColor: 'skyblue'}} />
            <View style={{flex:3, height: 50, backgroundColor: 'steelblue'}} />
        </View>
            <View style={{flex: 1, flexDirection: 'row'}}>  
            父组件没设置flexDirection=row，默认布局为列，子组件设置flex:1是没用的，子组件只能设置width
            父组件设置为flexDirection=row，子组件可以设置flex:1
    2、flexWrap ('wrap', 'nowrap') - 定义子元素是否允许多行排列
    3、justifyContent ('flex-start', 'flex-end', 'center', 'space-between', 'space-around') - 定义子元素如何对齐
    4、alignItems ('flex-start', 'flex-end', 'center', 'stretch') - 定义子元素在侧轴对齐的
    justifyContent - 子元素沿主轴的排列方式
        justifyContent: flex-start、center、flex-end、space-around以及space-between
        <View style={{ flex: 1,  flexDirection: 'row' justifyContent: center}}>
    alignItems - 
二、子视图属性：
    1、alignSelf ('auto', 'flex-start', 'flex-end', 'center', 'stretch') - 
    2、flex - 
网络请求
RN里网络请求分为: Fetch、WebSocket、XMLHttpRequest
事件
onPress: 点击
onLongPress: 长按
maximumZoomScale和minimumZoomScale: 双指缩放
http://reactnative.cn/docs/0.42/panresponder.html
动画
1、LayoutAnimation 用于全局的布局动画
2、Animated 用于创建更精细的交互控制的动画
    Animated 封装了四个可以动画的组件: View、Text、Image和ScrollView
    start/stop 方法来控制动画按顺序执行
定时器
setTimeout, clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame
RN与原生通信
http://blog.csdn.net/zww1984774346/article/details/71167775
rn与IOS原生通信的三部分
    1、属性        2、原生模块      3、原生UI组件封装
    原生要写到AppDelegate.m文件中
    # 属性是最简单的跨组件通信，从原生组件传递属性到React Native 或 React Native到原生组件
        原生中添加imageList:
            NSArray *imageList = @[@"https://facebook.github.io/react/img/logo_og.png",
                        @"https://facebook.github.io/react/img/logo_og.png"];
            NSDictionary *props = @{@"images" : imageList};
            RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                        moduleName:@"AwesomeProject"
                                        initialProperties:props             // 这里initialProperties:props]传递给RN
                                        launchOptions:launchOptions];
        RN中接收与props传值一样:
                    this.props.images.map(function(items){
                        return <Image 
                            source={{uri:items}} 
                            style={{width:100,height:100}}></Image> 
            </View>
1、RN访问OC
    // 创建原生模块实例
    var NativeModule = require('react-native').NativeModules.NativeTest;
    // 调用原生的doSomething()方法
    NativeModule.doSomething('ReactNative');
2、OC访问RN
http://www.jianshu.com/p/9d7dbf17daa5
生成测试包
iOS—最全的真机测试教程   http://www.cocoachina.com/ios/20160711/17004.html
团队开发的Xcode配置和生成包
    xCode -> Preferencse -> Accounts -> + 填加 选择 add apple ID 将账号和密码输入
    点击工程目录 -> General 
        -> Identity面板下的 Bundle Identifler 填写权限 “com.ucredit.paydayloan” 
        -> 在 Signing面板中的 Team 中选择"ZhongChengXingyu of......"
    将手机与mac连接，将Device选择当前手机设备，点击 运行，写读取设备成功后，在运行一次这次是执行build
原生组件
两种方法加载原生组件
1、react-native link 命令
    不仅会将第三方模块的原生组件代码链接入 Android/IOS 中，还会将字体等文件移动相应的目录中
2、通过Xcode来导入组件
    http://www.cnblogs.com/shaoting/p/6148085.html
3、Flow
    Flow是 Facebook出品的表态类型语言，可以将RN内部也支持ES 7的类属性的写法
        // 就可以不用在象ES 6将静态属性写到constructor中
        class MyComponent extends Component {
            constructor(props){
                super(props);
                // 私有属性
                this.isField = 1;   
                // state
                this.state = {
                    username: 'siguang'
            render(){
                return (
                        {this.username}
                    </View>
        class MyComponent extends Component {
            isField = 1;
            state = {
                username: 'siguang'
            render(){
                return (
                        {this.usernmae}
                    </View>
调试
1、Command+R  重新刷新
2、Command+D  打开菜单 
3、Debug JS Remotely 用chrome浏览器调试,Alt+Command+j出现浏览器debug窗口
4、Disable Live Reload 时实刷新，代码修改保存后会就刷新
5、show Perf Monitor 打开FPS监控器
6、show Inspector 用于查看页面结构及属性
XCode装证书
http://www.cocoachina.com/ios/20160711/17004.html
| 相关文章
| https://github.com/jondot/awesome-react-native#videos
| http://reactnative.cn/docs/0.44/getting-started.html
| http://www.devio.org/
| https://github.com/crazycodeboy/RNStudyNotes/
| http://blog.csdn.net/quanqinyang/article/details/52215652   调试方法
| http://lib.csdn.net/base/reactnative/structure
| http://www.jianshu.com/p/5b185df2d11a
| http://www.lcode.org/react-native/
| http://blog.csdn.net/column/details/reactnative2016.html?&page=3
| http://lib.csdn.net/article/reactnative/63268   打包到真机
|
| 示例
| https://github.com/react-native-community
| https://github.com/ljunb/react-native-iShiWuPai       示例
| https://github.com/sunnylqm
| https://github.com/DoctorQ/react-native-helloworld
|
| http://blog.csdn.net/liu__520/article/category/6460088
| http://www.devio.org/tags/#React Native
|

根据ios、android不同系统

定义一个兼容组件:
    var Component = Platform.select({
        ios: () => require('ComponentIOS'),
        android: () => require('ComponentAndroid'),
    })();
    <Component />
样式兼容:
    import { Platform, StyleSheet } from 'react-native';
    var styles = StyleSheet.create({
        height: (Platform.OS === 'ios') ? 200 : 100,
    import { Platform, StyleSheet } from 'react-native';
    var styles = StyleSheet.create({
        container: {
            flex: 1,
            ...Platform.select({
            ios: {
                backgroundColor: 'red',
            android: {
                backgroundColor: 'blue',

react-native 内置组件

需要在react-native对象进行解构 
import {View, TextInput, Text} from 'react-native'

View 用来布局的组件

<View style={{ flex: 1; justifyContent: 'center', alignItems: 'center}}>
    <Text>xxxxx</Text>
</View>

Text 显示文本内容

<Text>Component A</Text>

TextInput 文本输入框

属性: 
    autoCapitalize - 枚举类型，可选值有none,sentences,words,characters.当用户输入时，用于提示。
    placeholder - 占位符，在输入前显示的文本内容。
    value - 文本输入框的默认值。
    placeholdertTextColor - 占位符文本颜色。
    password - 如果为ture ， 则是密码输入框，文本显示为＊＊＊。
    multiline - 如果为true ， 则是多行输入。
    editable - 如果为false ， 文本框不可输入。其默认值事true。
    autoFocus - 如果为true， 将自动聚焦。
    clearButtonMode - 枚举类型，可选值有never，while－enditing , unless-editing,always.用于显示清除按钮。
    maxLength - 能够输入的最长字符数。
    enablesReturnKeyAutomatically : 如果值为true，表示没有文本时键盘是不能有返回键的。其默认值为false。
    returnKeyType - 枚举类型，可选值有default,go,google,join,next,route,search,send,yahoo,done,emergency-call。表示软键盘返回键显示的字符串。
    onChangeText - 当文本输入框的内容发生变化时，调用该函数。onChangeText接收一个文本的参数对象。
    onChange - 当文本变化时，调用该函数。
    onEndEditing - 当结束编辑时，调用该函数。
    onBlur - 失去焦点出发事件。
    onFocus - 获得焦点出发事件。
    onSubmitEditing : 当结束编辑后，点击键盘的提交按钮出发该事件。
<TextInput
    style={styles.inp}
    placeholder="none"
    autoCapitalize="none" />

KeyboardAvoidingView 键盘

用于解决手机上弹出键盘挡住视图，本组件可以自动根据键盘的位置，调整自身的position

Button 按钮

color: 颜色       disabel: 是否可用       onPress: 点击事件       title: 按钮文本
<Button
    onPress={onPressLearnMore}
    title="Learn More"
    color="#841584"
    accessibilityLabel="Learn more about this purple button" />

Image 图片加载的两种方式

onLayout: 元素挂载或布局中改变调用      onLoad: 加载成功完成调用        onLoadEnd: 加载结束后，无论成功失败都调用
resizeMode:  cover:等比拉伸      strech:保持原有大小       contain:图片拉伸  充满空间
source: 图片的资源地址
1、require引用  使用静态图片资源
    <Image source={require('./components/images/i1.png')} style={{width: 100, height: 100}} resizeMode={'cover'} />
    注: 使用require静态资源，不允许拼接url <Image source={require('./img/my_icon'+'.png')} />
2、uri  使用网络图片资源
    <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
3、使用原生图片资源(ios中的图片)
    打开xCode 在工程 打开images xcassets目录，将图片vue-banner.jpg拖入到appicon下进行导入
    加载 <Image source={{uri: 'vue-banner'}} style={styles.imgStyle2} resizeMode="cover" />  重启项目
4、使用本地文件系统中的资源(相册里的图片)

TarBarIOS 选项卡插件只能在根元素不能被任何元素包裹

TabBarIOS 属性
    barTintColor 标签栏背景色 
    tintColor 当前选中的标签颜色 
    translucent Boolean  是否标签栏半透明
    <TabBarIOS barTintColor="#ccc" tintColor="#fff">
        <TabBarIOS.Item> ... </TabBarIOS.Item>
    </TabBarIOS>
TabBarIOS.Item 属性
    title: 图标下面的标题文字
    badge: 右上角显示一个红色气泡 提示气泡
    icon: 显示的图标  
        icon={require('../images/i4.png')} 加载本地
        icon={{uri: base64Icon, scale: 3}} 加载其它 并且带缩放
    selectedIcon: 选中的图标
    selected: 是否为选中状态 selected: {this.state.selectName = 'blue'}
    onPress(): 按下

Fetch 网络请求

获取接口数据, 处理get或post的请求
Example:
    1、Get
    onPressLearnMore(){
        let that = this;
        const REQUEST_URL = 'http://goucai.diyicai.com/lottery/hisnumber.action?lotteryId=001&issueLen=20&d=1496242956216';
        fetch(REQUEST_URL)
            .then((response) => {
                return response.json();  //把response转为json
            .then((responseData) => {   // 接收上面的转好的json
                debugger;
                let data = responseData[0].ernieDate;
                that.setState({lotter: data})
                console.log(data);
            .catch((error) => {
                this.setState({
                    error: true,
                    errorInfo: error
            .done();
    2、post:
    fetch('https://mywebsite.com/endpoint/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        body: JSON.stringify({
            firstParam: 'yourValue',
            secondParam: 'yourOtherValue',

SectionList 分组的列表组件

不需要分组可以使用FlatList, 如果需要分组使用SectionList

TouchableHighlight 封装视图把一部分内容放到一个容器中可以方便处理

render: function () {
    return (
        <TouchableHighlight onPress={this._onPressButton} style={styles.mt40}>
                <Text>{this.state.userName}</Text>
                <Image
                    style={styles.mt40}
                    source={require('./src/images/1.jpg')}
            </View>                    
        </TouchableHighlight>

Dimensions 获取设备屏幕的宽高

let winWidth = Dimensions.get('window').width;
let winHeight = Dimensions.get('window').height;

DatePickerIOS 日期选择器

date: 当前被选中的日期      mode: 选择器模式       onDateChange: 选中事件
maximumdDate: 可选的最大日期       minimumDate: 可选的最小日期        
minuteInterval: 可选的最小分钟     timeZoneOffsetInMinutes: 时区差，单位分钟

TimePickerAndroid Android时间选择器的对话框

ActivityIndicator loading加载图标

animating: 是否显示 true false
color: 图片颜色
size: 大小  small large

不是弹窗，而是整弹个层
animationType: 展示层的动画效果  slide 滑动   fade 淡入淡出    none 无
onRequestClose:

alert、AlertIOS 对话框

Alert.alert(标题，内容，[{确定按钮和}]
<Text onPress={() => Alert.alert(
    '这里是弹层的标题',
    '这里是内容',
        {text: '取消', onPress: () => console.log('Cancel Pressed!')},    // 显示的按钮和回调函数
        {text: '确定', onPress: () => console.log('OK Pressed!')},
)}>点击显示弹窗</Text>

StatusBar 状态栏组件

控制顶部运营商、电量位置的
    animated bool   进行设置当状态栏的状态发生变化的时候是否需要加入动画。当前该动画支持backgroundColor,barStyle和hidden属性
    hidden  bool  进行设置状态栏是否隐藏（最顶部的那条栏）
    backgroundColor   color类型，仅支持Android设备，设置状态栏的背景颜色
    translucent bool类型，仅支持Android设备, 进行设置状态栏是否为透明。当状态栏的值为true的时候，应用将会在状态栏下面进行绘制显示。这样在Android平台上面就是沉浸式的效果，可以达到Android和iOS应用一致性效果。该值常常配置半透明效果的状态栏颜色一起使用
    barStyle  enum('default','light-content')  枚举类型，仅支持iOS设备。进行设置状态栏文字的颜色
    networkActivityIndicatorVisible   bool类型，仅支持iOS设备。设置状态栏上面的网络进度加载器是否进行显示
    showHideTransition   enum('fade','slide') 枚举类型，仅支持iOS设备。进行设置当隐藏或者显示状态栏的时候的动画效果。默认值为'fade'

Picker PickerIOS 象select的选择菜单

1、selectedValue: 选中后的值
2、onValueChange: 触发事件
3、PickerIOS.Item: 定义菜单的先项
<PickerIOS
    style={{width:200}}
    selectedValue={this.state.language}
    onValueChange={(lang) => this.setState({language: lang})}>
    <PickerIOS.Item label="Java" value="java" />
    <PickerIOS.Item label="JavaScript" value="js" />
</PickerIOS>
<Text>当前选择的是:{this.state.language}</Text>

Slider 选择一个范围的组件, 滑块

属性:
    disabled    bool    如果为true，用户无法移动这个滑动条。默认值为false
    maximumValue    number    滑动条最大值。默认为1
    minimumValue    number    滑动条最小值，默认为0
    onSlidingComplete    function    当用户完成值的改变被回调的方法
    onValueChange    function    当用户正在滑动滑动条持续回调的方法
    step    number    滑动条的最小单位。这个值应该在0到最大值-最小值之间。默认为0
    testID    string    
    value    number    滑动条选择的值。这个值应该在最小值和最大值之间，它们的默认值分别为0和1。默认值为0

Switch 开关滑块组件

disabled 是否禁用
onValueChange 当值改变时回调
value 开关是否打开，默认false
onTintColor: 开启状态背景颜色
tintColor: 关闭状态时边框颜色或背景色
thumbTintColor: 开关上按钮的颜色     
testID

ListView 用于垂直滚动列表，用于元素之间结构近似而仅数据不同, listView不立即渲染所有元素, 优先渲染屏幕可见元素

ListView继承了ScrollView所以有ScrollView下所有的属性
ListView属性:
    dataSource - 列表数据源
    renderRow - 解析每一条的数据的展示结构样式
    rowHasChanged - 函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。
    scrollView - automaticallyAdjustContentInsets={false} 如果不设置这个属性顶部会一个块留白
ListView方法:
    ListView.DataSource - 用于比对两条数据是否相同，如果不相同进行渲染
Example:
    class DemoComponent extends Component {
        constructor(props){
            super(props);
            const ds = new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2
            this.state = {
                dataSource: ds.cloneWithRows([
                        img: require('../../images/car-img.png'),
                        title: '福特福克斯2011款 两厢 1.8L 自动时尚型'
                        img: require('../../images/car-img.png'),
                        title: '福特福克斯2011款 两厢 1.8L 自动时尚型'
                        img: require('../../images/car-img.png'),
                        title: '福特福克斯2011款 两厢 1.8L 自动时尚型'
        // 返回每一条数据的结构
        carRenderRow(rowData){
            return (
                <View style={styles.carList}>
                    <Image source={rowData.img} style={styles.carPicture} />
                    <Text style={styles.carFont1}>{rowData.title}</Text>                  
                </View>
        render(){
            return (
                <View style={{flex: 1, marginBottom: 60}}>
                    <ListView
                        dataSource={this.state.dataSource}
                        renderRow={this.carRenderRow} />             
                </View>

RefreshControl 下拉刷新

PullToRefreshAndroidView 也是实现下拉刷新的组件
    onRefresh  function方法 当视图开始刷新的时候调用
    refreshing  bool  决定加载进去指示器是否为活跃状态，也表名当前是否在刷新中
    colors [ColorPropType]   android平台适用  进行设置加载进去指示器的颜色，至少设置一种，最好可以设置4种
    enabled  bool   android平台适用   用来设置下拉刷新功能是否可用
    progressBackgroundColor ColorPropType  设置加载进度指示器的背景颜色
    size RefreshLayoutConsts.SIZE.DEFAULT  android平台适用  加载进度指示器的尺寸大小 ，具体可以查看RefreshControl.SIZE(详细点击进入)
    tintColor ColorPropType   iOS平台适用  设置加载进度指示器的颜色
    title string iOS平台适用  设置加载进度指示器下面的标题文本信息

AppState、AppStateIOS 获取应用当前是在前台还是在后台，并且能在状态变化的时候通知你

AppState.currentState 返回的值:
    active - 表示当前App在前台运行
    background - 应用正在后台运行。用户既可能在别的应用中，也可能在桌面。
    inactive - 该状态我们可以暂时不考虑，因为该状态不会出现在现在React Native App中。

AppRegistry 运行RN的入口

AppRegistry.registerComponent('exampleApp', () => exampleApp);

AsyncStorage 简单的、未加密的、异步的、持久化的Key-Value存储系统

一、方法: anyncStroage每个方法返回的都是一个Promise
    getItem(key, callback) - 获取数据
    setItem(key, value, callback) - 存储数据
    removeItem(key, callback) - 删除数据
    mergeItem(key, value, callback) - 合并两值
    clear() - 删除全部
    getAllKeys(callback) - 获取所有可访问到的数据
    flushGetRequest() - 清除所有进行中的查询操作
    multiGet(keys <Array>, callback) - 获取keys所包含所有的字段值
        AsyncStroage.multiGet(['user', 'enter'])
            .then((data) => {
                // 这里可以取到本地存储中的user和enter的值
                * data返回的是一个二维数组
                *   ["key1", "aaa"],
                *   ["key2", "bbb"]
                let user = JSON.parse(data);

ProgressBarAndroid ProgressViewIOS 加载进度

属性:
    View 相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
    progress number  设置进度值 (范围在0-1之间)
    progressTintColor  string  设置进度条本身的颜色
    progressViewStyle   enum('default','bar')  加载进度的风格   枚举类型 默认风格和Bar条类型
    trackImage   Image.propTypes.source    设置一个可以拉伸的图片，设置进度条剩下部分进度的图片
    trackTintColor  string   进度条的颜色(已经有进度的情况)

DrawerLayoutAndroid 抽屉安卓

SegmentedControlIOS
ToolbarAndroid
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
ViewPagerAndroid
VirtualizedList
WebView

API
ActionSheetIOS
AdSupportIOS
Animated
BackAndroid
BackHandler 后退
CameraRoll 访问本地相册
Clipboard 读写剪贴板的内容
DatePickerAndroid Android日期选择器的对话框
Easing
Geolocation 地理位置
ImageEditor 根据URI剪裁对应的图片
ImagePickerIOS
ImageStore
InteractionManager
LayoutAnimation 当布局变化时，自动将视图运动到它们新的位置上
Linking 传入和传出的App链接进行交互
NativeMethodsMixin
NetInfo 获取设备联网或离线的状态信息
PanResponder 多点触摸操作协调成一个手势
PermissionsAndroid
PixelRatio 获取设备的像素密度的方法
PushNotificationIOS 处理应用的推送通知
Share 打开一个对话框来共享文本内容
StyleSheet 定义css样式
Systrace
ToastAndroid
Vibration 控制设备震动
布局样式属性
阴影样式属性

第三方组件

rnpm介绍 下载完第三方组件不能直接用，需要通过rnpm 直接组件的内容挂载到工程中去，需要执行$ rnpm link 模块名 ，与react-native link 相同
    安装rnpm  $ npm i rnpm -g
    link的原因：以下组件都是原生开发，wrapper了一层js，因此需要link .a到project中
$ react-native-elements   基础组件    https://github.com/react-native-community/react-native-elements#buttons
$ lodash 
$ query-string 
$ sha1      加密模块
$ react-native-button
$ react-native-audio      音频
$ react-native-video      视频  https://github.com/react-native-community/react-native-video
$ react-native-image-picker  摄像头和本地相册  https://github.com/marcshilling/react-native-image-picker
$ react-native-progress   进度条
$ react-native-storage    存储  https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md
$ react-native-sk-countdown  倒计时
$ react-native-swiper     轮播 https://github.com/leecade/react-native-swiper
$ react-native-barcodescanner 扫二维码 Android   https://github.com/ideacreation/react-native-barcodescanner
                                      http://blog.csdn.net/liu__520/article/details/52889950
$ react-native-animatable  动画   https://github.com/oblador/react-native-animatable
$ react-native-device-info 设备信息  https://github.com/rebeccahughes/react-native-device-info
                                    http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-acquisition-device-information-component-react-native-device-info/
Geolocation  内置的地理位置 
http://www.jianshu.com/p/53ff78168acc       整理的插件
https://yq.aliyun.com/articles/78154?utm_campaign=wenzhang&utm_medium=article&utm_source=QQ-qun&201759&utm_content=m_20152
http://www.jianshu.com/p/e30feb098ef2

react-native-vector-icons 图标类

1、安装 npm i react-native-vector-icons --save && react-native link react-native-vector-icons
    import FontAwesome from 'react-native-vector-icons/FontAwesome';        // 引用的FontAwesome文件
    /* 图标文件名
        Entypo
        EvilIcons 
        FontAwesome 
        Foundation 
        Ionicons 
        MaterialIcons
        MaterialCommunityIcons 
        Octicons 
        Zocial 
        SimpleLineIcons 
    class myfirst extends Component {
        render() {
            return (
                <View style={styles.container}>
                    <FontAwesome name="address-book" size={20} color="#4F8EF7" />
                </View>
3、注意: 这里icon对一些组件封装
    import Icon from 'react-native-vector-icons/Ionicons';
    return (
        <TabBarIOS>
            <Icon.TabBarItem        // 这里对TabBarItem进行了封装  或者ToolbarAndroid
                title="Home"
                iconName="ios-home-outline"     // 这里属性名为 iconName 而不是 icon
                selectedIconName="ios-home">    // 选中的
                <View style={styles.tabContent}><Text>Home Tab</Text></View>
            </Icon.TabBarItem>
        </TabBarIOS>
https://github.com/oblador/react-native-vector-icons
http://ionicons.com/  图标官网
http://blog.csdn.net/uuq/article/details/53150841  使用方法  
https://github.com/oblador/react-native-vector-icons#installation   图标对应的name值

mockjs

npm i mockjs --save
import Mock from 'mockjs'

| 参考资料
| react.parts/native // 第三方组件列表
|
| http://www.lcode.org/react-native/
| http://blog.csdn.net/hsbirenjie/article/category/6307126/3
| http://blog.csdn.net/jiangqq781931404/article/category/6055594/2
| http://www.hangge.com/blog/cache/category_76_1.html
| http://blog.csdn.net/mengks1987/article/category/6850683
| http://blog.csdn.net/yuanguozhengjust/article/category/6058018
|