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

安裝

1.在終端運(yùn)行 npm i react-native-easy-toast --save
2.在要使用Toast的js文件中添加import Toast, {DURATION} from 'react-native-easy-toast'

Demo

Examples

Screenshots
如何使用？

第一步：

在你的js文件中導(dǎo)入 react-native-easy-toast：

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

第二步：

將下面代碼插入到render()方法中：

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

注意: 請(qǐng)將<Toast ref="toast"/> 放在最外層View的底部.

第三步：

使用：

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

在需要彈出提示框時(shí)使用上面代碼即可。
用例

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('網(wǎng)絡(luò)加載中...');
    }