注意:我主要用的包管理工具是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
最后,我放弃了这个库!!改用 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
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出
对博客文章的参考,若原文章博主介意,请联系删除!请原谅