react native常见第三方库集成（二）

注意：我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。

个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！

一、比较常用，集成简单的几个库（只需要安装即可的）

moment.js  ==>> 一个 JavaScript 日期处理类库，个人觉得非常好用

安装：yarn add moment（npm install moment --save)

官方文档：http://momentjs.cn/

github：https://github.com/moment/moment

ramda.js ==>> 一款实用的 JavaScript 函数式编程库，非常实用、方便

安装：yarn add ramda（npm install ramda）

参考博客：http://www.ruanyifeng.com/blog/2017/03/ramda.html

扫描二维码关注公众号，回复： 2531000 查看本文章

github：https://github.com/ramda/ramda

crypto-js ==>> 一款加密的JavaScript库（有多种加密方式：MD5、enc-base64、enc-utf8等） 

安装：yarn add crypto-js（npm install crypto-js)

参考博客：https://blog.csdn.net/WangYangsea/article/details/78736513（不是很好）

github：https://github.com/brix/crypto-js

代码：（简单使用了moment.js，ramda.js 和 crypto-js ）

import React, {Component} from "react";
import {
    Container,
    Content,
    Button,
    Text,
} from "native-base";
import moment from 'moment';
import R from 'ramda';
import MD5 from 'crypto-js/md5';

export default class NativeBase extends Component{
    constructor() {
        super();
        this.state = {
            day : moment().format('YYYY-MM-DD'),
            pwd: '123456',
        }
    }

    render(){
        const password = MD5(this.state.pwd).toString();        //使用crypto-js 的 MD5加密方式
        return(
            <Container>
                <Content>
                    <Button>
                        <Text>Click Me!</Text>
                    </Button>

                    <Text>moment.js 使用：{this.state.day}</Text>
                    <Text>ramda.js 使用：{R.add(7)(10)}</Text>
                    <Text>crypto-js 使用：{password}</Text>
                </Content>
            </Container>
        )
    }
}

效果：

二、react-native-datepicker   ===>>> 好用的日期时间选择器

安装：yarn add react-native-datepicker（npm install react-native-datepicker --save）

页面中使用：

代码：

import React, { Component } from 'react'
import DatePicker from 'react-native-datepicker'

export class MyDatePicker extends Component {
    static navigationOptions = {
        header: null,   //去除页面中顶部的空白导航栏
    };
    constructor(props){
        super(props)
        this.state = {date:"2016-05-15"}
    }

    render(){
        return (
            <DatePicker
                style={{width: 200,marginTop:50,marginLeft:30}}
                date={this.state.date}
                mode="date"                     //模式   date：日期, datetime：日期时间， time：时间
                placeholder="select date"
                format="YYYY-MM-DD"            //使用moment.js指定日期的显示格式。
                minDate="2016-05-01"           //最小时间（可选择）
                maxDate="2016-06-01"           //最大时间（可现在）
                confirmBtnText="Confirm"       //在ios中指定 确认btn 的文本。
                cancelBtnText="Cancel"         //在ios中指定 取消btn 的文本。
                customStyles={{
                    dateIcon: {
                        position: 'absolute',
                        left: 0,
                        top: 4,
                        marginLeft: 0
                    },
                    dateInput: {
                        marginLeft: 36
                    }
                    // ... You can check the source to find the other keys.
                }}
                onDateChange={(date) => {this.setState({date: date})}}      //选择后的回调函数
            />
        )
    }
}

效果：

后期如果用到比较好的第三方库，继续更新....

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！