23mofang-react-native-root-toast 中文文档教程

Question

react-native-root-toast

---

Features

1. Pure javascript solution.
2. Support both Android and iOS.
3. Lots of custom options for Toast.
4. You can show/hide Toast by calling api or using Component inside render.

Install

npm install react-native-root-toast

Settings

Name	Default	Type	Description
duration	Toast.durations.SHORT	Number	The duration of the toast. (Only for api calling method)
visible	false	Bool	The visibility of toast. (Only for Toast Component)
position	Toast.positions.BOTTOM	Number	The position of toast showing on screen (A negative number represents the distance from the bottom of screen. A positive number represents the distance form the top of screen. 0 will position the toast to the middle of screen.)
animation	true	Bool	Should preform an animation on toast appearing or disappearing.
shadow	true	Bool	Should drop shadow around Toast element.
backgroundColor	null	String	The background color of the toast.
shadowColor	null	String	The shadow color of the toast.
textColor	null	String	The text color of the toast.
delay	0	Number	The delay duration before toast start appearing on screen.
hideOnPress	true	Bool	Should hide toast that appears by pressing on the toast.
onShow	null	Function	Callback for toast`s appear animation start
onShown	null	Function	Callback for toast`s appear animation end
onHide	null	Function	Callback for toast`s hide animation start
onHidden	null	Function	Callback for toast`s hide animation end

Properties

Toast.durations

预设 toast 持续时间。

1. Toast.durations.SHORT（等于2000）

2. Toast.durations.LONG（等于3500）

Toast.positions

预置吐司的位置。

1. Toast.positions.TOP（等于20）

2. Toast.positions.BOTTOM（等于-20）

3. Toast.positions.CENTER（等于0 >)

Usage

有两种不同的方法来管理 Toast。

Calling api

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


// Add a Toast on screen.
let toast = Toast.show('This is a message', {
    duration: Toast.durations.LONG,
    position: Toast.positions.BOTTOM,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0,
    onShow: () => {
        // calls on toast\`s appear animation start
    },
    onShown: () => {
        // calls on toast\`s appear animation end.
    },
    onHide: () => {
        // calls on toast\`s hide animation start.
    },
    onHidden: () => {
        // calls on toast\`s hide animation end.
    }
});

// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function () {
    Toast.hide(toast);
}, 500);

Using a Component

注意： 使用 Component inside render 显示 toast，当 卸载时，toast 会自动消失。

import React, {Component} from 'react-native';
import Toast from 'react-native-root-toast';

class Example extends Component{
    constructor() {
        super(...arguments);
        this.state = {
            visible: false
        };
    }

    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 2000); // show toast after 2s

        setTimeout(() => this.setState({
            visible: false
        }), 5000); // hide toast after 5s
    };

    render() {
        return <Toast
            visible={this.state.visible}
            position={50}
            shadow={false}
            animation={false}
            hideOnPress={true}
        >This is a message</Toast>;
    }
}

Run example:

cd ./Example
npm install