react-native-root-toast自定义弹窗

最新推荐文章于 2024-08-22 09:13:18 发布

木凡_iflytek

最新推荐文章于 2024-08-22 09:13:18 发布

阅读量1.7k

点赞数 4

分类专栏： RN 文章标签： react native

本文链接：https://blog.csdn.net/yfloctar/article/details/106814775

版权

本文介绍了如何在react-native应用中使用react-native-root-toast库自定义弹窗。详细展示了官方提供的两种调用方式，特别是如何解决自定义弹窗中文字不显示的问题。通过查看和修改源码，找到了将自定义组件正确显示的方法。

摘要由CSDN通过智能技术生成

react-native-root-toast自定义弹窗

基于版本 “react-native-root-toast”: “^3.2.1”

Toast的调用方法：

官方api提供两种调用方式

1、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);

2、Using a Component

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}
            hide