React Native控件概述

1.控件介绍及分类
（1）基础组件
（2）第三方组件
（3）自定义组件
（4）统一样式风格，主题变换的组件
（5）元组件和复合组件
2.如何创建控件component
（1）ES6推荐 Component
（2）ES5使用 createReactClass
（3）通过函数创建组件 function
3.封装App使用的控件
4.参考文章

1.控件介绍及分类
（1）基础组件

View 基础视图
Text 文本展示
Button 按钮控件
Image 图片控件
TextInput 输入控件
FlatList 列表控件
ScrollView 滚动控件
RadioGroup 多选控件
RadioButton 单选控件
Switch 切换开关控件
ImageBackground 图片背景控件
Dialog 对话框
WebView 浏览器控件
Touchable 触摸控件

（2）第三方组件

图表报表 https://github.com/tomauty/react-native-chart
设备信息 https://github.com/react-native-community/react-native-device-info
抽屉效果 https://github.com/root-two/react-native-drawer
侧滑按钮 https://github.com/dancormier/react-native-swipeout
轮播视图 https://github.com/race604/react-native-viewpager
动画组件 https://github.com/oblador/react-native-animatable

（3）自定义组件

一种是Component的组合，View的叠加：

 class MyButton extends Component {
    render() {
        return (
<TouchableHighlight  
                       underlayColor={this.props.bgColor}
                       activeOpacity={0.5}
                       onPress={this.props.onPress} >
            <Image source={require('./res/himi.png')}
                style={ { width: 100, height: 100}}/>         
                 </TouchableHighlight>
        )
    }
}

另一种是 native和js的协议组合，Js和Native的结合

需要写三端的代码，js、android、ios。
其中name属性：js与native有相同的名字
支持的参数类型有：boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap。
js端代码样例：

// ImageView.js
import { PropTypes } from 'react';
import { requireNativeComponent, View } from 'react-native';
var iface = {
  name: 'ImageView', //native端使用相同的参数
  propTypes: {
    src: PropTypes.string,    //native使用对应的参数
    borderRadius: PropTypes.number,   //native使用对应的参数
    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),    //native使用对应的参数
    ...View.propTypes // 包含默认的View的属性
  },
};
module.exports = requireNativeComponent('RCTImageView', iface);

ios实现步骤：
首先创建一个子类
添加RCT_EXPORT_MODULE()标记宏
实现-(UIView *)view方法

android实现步骤：
创建一个ViewManager的子类。
实现createViewInstance方法。
导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。
把这个视图管理类注册到应用程序包的createViewManagers里。

（4）统一样式风格，主题变换的组件

如果准备开发一款设计风格统一的rn程序，并且可以轻松切换主题样式。美团的绿、京东的红、滴滴的橙等等等

（5）元组件和复合组件

元组件：框架内置的，可以直接使用的组件。例如：View、Image等。它在React Native中ReactNativeBaseComponent来描述。
复合组件：用户封装的组件，一般可以通过集成Component来构建，提供render()方法来返回渲染目标。它在React Native中用ReactCompositeComponent来描述。

2.如何创建控件component
（1）ES6推荐 Component

export default 的作用是导出该类，以供外面使用。

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
export default class MyComponent extends Component {
    render() {
        return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {this.props.name}</Text>
    }
}

（2）ES5使用 createReactClass

module.exports 的作用是导出该类，以供外面使用。

var MyComponent=React.createClass({
    render(){
        return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello </Text>
    }
})
module.exports = MyComponent;

（3）通过函数创建组件 function

函数式（无状态，不能使用this）
module.exports 的作用是导出该类，以供外面使用。

function MyComponent(props) {
    return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello {props.name}</Text>
}
module.exports = MyComponent;

3.封装App使用的控件：

XXLog 统一日志
XXLogin 登陆
XXNetwork 网络请求
XXShare 分享控件
XXRouter 路由跳转控件

4.参考文章
https://www.jianshu.com/p/c24173d5583d
https://segmentfault.com/a/1190000008402834
https://www.cnblogs.com/cag2050/p/9493138.html