Question

我需要实施＆＃34; react-native-easy-toast＆＃34;在我的项目的许多页面。因此我计划制作一个反应组件，以便我可以使用来自不同页面的相同组件。但要显示Toast需要调用this.refs.toast.show('hello world!');，那么如何从我的组件中调用它？

<Toast
      ref="toasterror"
      style={{ backgroundColor: 'red' }}
      position='top'
      positionValue={10}
      fadeInDuration={750}
      fadeOutDuration={2000}
      opacity={0.8}
      textStyle={{ color: 'white' }}
 />

https://github.com/crazycodeboy/react-native-easy-toast#getting-started

感谢。

Answer 1

您需要通过以下方式获取组件的参考：

onRef = component => {
  this._toast = component;
}

render() {
  return <Toast ref={this.onRef} ... />;
}

然后你可以在this._toast

上调用组件的方法

Answer 2

您可以按如下方式制作组件

<强> Toast.js

import Toast from 'react-native-easy-toast'
import React from 'react'

class ToastInstance extends React.Component {

    showToast = (duration) => this.refs.toast.show('hello world!', duration);

    componentWillReceiveProps(nextProps) {
        if(nextProps.show) {
            this.showToast(nextProps.duration)
        }
    }

    render() {
        return (
            <Toast
                ref="toast"
                style={{ backgroundColor: 'red' }}
                position='top'
                positionValue={10}
                fadeInDuration={750}
                fadeOutDuration={2000}
                opacity={0.8}
                textStyle={{ color: 'white' }}
            />
        )
    }
}

export default ToastInstance

<强>用法

import Toast from './Toast'


state = {  
        show: false,
        duration: 1000
    }

_renderToast = () => {
        this.setState({show: true})
        setTimeout(() => this.setState({show: false}), this.state.duration)
    }

render() {
 const {show, duration} = this.state
 return (
   <View>
     <Text onPress={this._renderToast}>Show Toast</Text>
     <Toast show={show} duration={duration}/>
   </View>
 ) 
}

您需要根据自己的方便为其添加功能

如何从父组件调用方法 - ReactNative

2 个答案: