react-native-sf-toast

结果页

安装

npm install react-native-sf-toast

使用

import {SFToast} from "react-native-sf-toast";
SFToast.showSuccess('title',2000);
SFToast.showFail('title',2000);
SFToast.showLoading('title',2000);
SFToast.showText('title',2000);  

例子

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

import SFToast from "./react-native-sf-toast/src/SFToast";

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props)
        this.state = {
            show: false
        }
    }

    render() {
        return (
            <View
                style={styles.container}>

                <SFToast ref={(ref) => this.toast = ref}/>

                    <Text
                        style={styles.welcome}
                        onPress={() => {
                          this.toast.showSuccess('success !!!', 2000);
                        }}>
                        Welcome to React
                        Native!
                    </Text>
                    <Text
                        style={styles.instructions}>
                        To get started,
                        edit
                        App.js
                    </Text>
                    <Text
                        style={styles.instructions}>
                        {instructions}
                    </Text>


            </View>
    );
    }
    }

    const styles = StyleSheet.create({
        container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
        welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
        instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    });