react-native-easy-toast

https://github.com/crazycodeboy/react-native-easy-toast/blob/master/README.zh.md

安装

1.在终端运行 npm i react-native-easy-toast --save
2.在要使用Toast的js文件中添加import Toast, {DURATION} from 'react-native-easy-toast'

Demo

Examples

Screenshots
如何使用?

第一步:

在你的js文件中导入 react-native-easy-toast:

import Toast, {DURATION} from 'react-native-easy-toast'

第二步:

将下面代码插入到render()方法中:

render() {
return (
<View style={styles.container}>
...
<Toast ref="toast"/>
</View>
);
}

注意: 请将<Toast ref="toast"/> 放在最外层View的底部.

第三步:

使用:

this.refs.toast.show('hello world!');

在需要弹出提示框时使用上面代码即可。
用例

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>
        );
    }

自定义 Toast

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>
        );
    }

componentDidMount(){
        this.refs.toast.show('网络加载中...');
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容