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

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

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

前言：这两天正在开发一个新项目，大佬在整理需求，so，项目环境的搭建以及常用第三方库的集成这种事情就轮到我了。。。

项目中有一个错误提示页面（Toash），需要写一个Toash组件，准备集成一个第三方的。

首先，我集成了react-native-easy-toast 这个库，但是发现并不是特别好用，因为只能将Toash写在触发的页面中（挨着触发点），自己再次封装不是特别好办（可能是我没找到方法），这样在项目中重复使用时是比较麻烦的。

安装：yarn add react-native-easy-toast（npm i react-native-easy-toast --save）

简单使用：

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={{padding: 10}}
                    onPress={()=>{
                        this.refs.toast.show('hello world!');
                    }}>
                    <Text>Press me</Text>
                </TouchableHighlight>
                <Toast ref="toast"/>
            </View>
        );
    }

自定义Toash：

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={{padding: 10}}
                    onPress={()=>{
                        this.refs.toast.show('hello world!',DURATION.LENGTH_LONG);
                    }}>
                    <Text>Press me</Text>
                </TouchableHighlight>
                <Toast
                    ref="toast"
                    style={{backgroundColor:'red'}}
                    position='top'
                    positionValue={200}
                    fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
                    textStyle={{color:'red'}}
                />
            </View>
        );
    }

参数博客：https://www.jianshu.com/p/39b8494efda0

github：https://github.com/crazycodeboy/react-native-easy-toast

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

最后，我放弃了这个库！！改用 react-native-root-toast

react-native-root-toast

安装：yarn add react-native-root-toast（npm install react-native-root-toast）

注意：react-native-root-toast这个库是要依赖与redux的，所以还需要安装redux，否则会报错。

即：yarn add redux

简单使用：

import React, {Component} from "react";
import {
    View,
    Text,
    Button,
    Image,
    Alert
} from 'react-native'
import Toast from "react-native-root-toast";

export class ToashScreen extends Component{
    static navigationOptions = {
        header: null,   //去除页面中顶部的空白导航栏
    };
    constructor() {
        super();
        this.state = {
        }
    }

    toash(){
        Toast.show('测试，简单使用toash', {
            duration: Toast.durations.SHORT,        //持续时间：Toast.durations.SHORT为2000毫秒；Toast.durations.LONG为3500毫秒
            position: Toast.positions.BOTTOM,       //位置定位：TOP，CENTER，BOTTOM三个值
            shadow: true,                           //是否在Toash周围显示阴影
            animation: true,                        //toash在显示、消失是是否有动画
            hideOnPress: true,                      //通过OnPress触发
            delay: 0,                               //延迟时间
        });
    }

    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Button
                    title="点我toash"
                    onPress={() => this.toash()}
                />


            </View>
        )
    }
}

简单使用效果：

自己封装成组件：


import Toast from "react-native-root-toast";

//弹出toash
export const showToast = msg => {
    if (!isEmpty(msg)) {
        const toast = Toast.show(msg, {
            duration: Toast.durations.SHORT,
            position: Toast.positions.CENTER,
            shadow: true,
            animation: true,
            hideOnPress: true,
            delay: 0,
        });
        // Toast.hide(toast);
        return toast;
    }
};

页面中引入使用：

import React, {Component} from "react";
import {
    View,
    Text,
    Button,
    Image,
    Alert
} from 'react-native'
import {showToast} from '../common/until'

export class ToashScreen extends Component{
    static navigationOptions = {
        header: null,   //去除页面中顶部的空白导航栏
    };
    constructor() {
        super();
        this.state = {
        }
    }

    toash(){
        showToast('测试，封装的Toash');
    }

    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Button
                    title="点我toash"
                    onPress={() => this.toash()}
                />
            </View>
        )
    }
}

效果：

参考博客：https://www.jianshu.com/p/fe84046c9325

github：https://github.com/magicismight/react-native-root-toast

ps：没找到比较好，比较简单明了的博客。但是github还是比较好的！！！

最后：

这次项目环境的搭建和常用第三方库的集成基本上完成了（react-native-code-push 和 react-native-getui 会在后期集成并使用）。因为项目不是很复杂，所以第三方库也不是很多。但是也集成 ui库、ramda、轮播、导航、图片选择、图片点击查看、日期选择、moment.js、js加密、Toash 等... 这些第三方库！！以及后期会加上的 codePush 和 getui ，基本上可以完成项目的开发了。这些库的集成过程我都有记录，需要的朋友可以参考！（codePush 和 getui 后期如果有时间也会加上）

===>>> 晒一下package.json

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

对博客文章的参考，若原文章博主介意，请联系删除！请原谅