React Native之组件篇

组件列表

ListView - 用于展示数据列表

ScrollView - 带滚动条的容器

Fetch - 请求网络接口数据

TarBarIOS - 切换菜单

TouchableHighlight - 封装视图，可以将一些内容放到这个容器中方便处理点击


View - 窗口，相当于div

Image - 加载图片

Text - 展示文本

TextInput - 文本输入框

Button - 按钮

根据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" />

Keyboard 控制键盘的

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',
        })
    })

FlatList 加载网络数据

SectionList 分组的列表组件

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

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

render: function () {
    return (
        <TouchableHighlight onPress={this._onPressButton} style={styles.mt40}>
            <View>
                <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>

Navigator NavigatorIOS 导航

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

ScrollView 可滚动的容器，可以放多个组件和视图

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

2、引用

    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
|