如何在本机响应中向应用根发出事件

Question

我正在尝试在我的React Native应用上实现烤面包消息（通知）。我正在考虑在应用程序根目录中实现我的Toast组件，并且当单击按钮（在应用程序中的某个位置）时，应用程序根目录将对此有所了解并显示该Toast。我不想使用一个库，因为我为此使用了复杂的用户界面，并且希望在吐司中包含按钮。

这是根组件-App.js：

import { Provider } from 'react-redux';

import {Toast} from './src/components/Toast';
import store from './src/store/Store.js';
import AppNavigator from './src/navigation/AppNavigator';
import StatusBar from './src/components/StatusBar';

export default function App(props) {
    return (
        <Provider store = { store }>
          <View style={styles.container}>
            <StatusBar barStyle="default"/>
            <AppNavigator />
            <Toast></Toast>
          </View>
        </Provider>
    );
}

任何想法我该怎么做？谢谢。

Answer 1

为此，我建议使用组件将应用程序包装在您敬酒的地方。例如：

App.js

render(){
    return (
      <Provider store = { store }>
          <View style={styles.container}>
              <AppContainer/>
          </View>
    </Provider>
    )
}

您的AppContainer将具有与此类似的渲染方法：

render(){
    return (
        <Frament>
            <StatusBar barStyle="default"/>
            <AppNavigator />
            <Toast></Toast>
        </Fragment>
        )
}

然后（当您使用redux时，您可以连接AppContainer。之后，只需使用componentDidUpdate

使该组件了解redux上的更改

componentDidUpdate = (prevProps) => {
    if(this.props.redux_toast.visible !== prevProps.redux_toast.visible){
        this.setState({
            toastVisible : this.props.redux_toast.visible,
            toastMessage: this.props.redux_toast.message
        })
    }
}

这只是一个关于如何使用redux来完成此操作的示例，我不知道您的toast或redux结构如何，但是它应该是您的用例的可用解决方案。