React native 如何在react native中将事件发送到应用程序根目录

我正在尝试在我的React本机应用程序上实现toast消息（通知）。 我正在考虑在应用程序根目录中实现我的Toast组件，当单击按钮（应用程序中的某个地方）时，应用程序根目录将知道它并使Toast可见。 我不想使用库，因为我有复杂的UI，我想在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>
    );
}

// this is how I connect each page:
let HomePage = connect(state => mapStateToProps, dispatch => mapDispatchToProps(dispatch))(HomeScreen);
let SearchPage = connect(state => mapStateToProps, dispatch => mapDispatchToProps(dispatch))(SearchScreen);

const HomeStack = createStackNavigator(
    {
        Home: HomePage,
        Search: SearchPage,
    },
    config
);

const mapStateToProps = (state) => {
    return {
        // State
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        // Actions
    }
};

export default tabNavigator;

---

你知道我该怎么做吗？谢谢。

为此，我建议使用一个组件将您的应用程序包装到您的应用程序中。例如：

App.js

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

然后（在使用redux时）可以连接

AppContainer

。之后，只需使用

componentdiddupdate

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结构如何，但它应该是一个适用于您的用例的可用解决方案

编辑

它应该是这样的：

//CORE
import React from 'react';

//REDUX
import { Provider } from 'react-redux';
import store from './redux/store/store';
import AppContainer from './AppContainer';


export default () => {
  return (
    <Provider store={store}>
        <AppContainer />
    </Provider>
  )
}

//核心
从“React”导入React；
//重演
从'react redux'导入{Provider}；
从“./redux/store/store”导入存储；
从“./AppContainer”导入AppContainer；
导出默认值（）=>{
返回(
)
}

AppContainer.js：

import React, { Component } from "react";
import { View, Stylesheet } from "react-native";
import StatusBar from "path/to/StatusBar";
import AppNavigator from "path/to/AppNavigator";
import Toast from "path/to/Toast";
import { connect } from "react-redux";


class AppContainer extends Component {
    constructor(props){
        super(props);
        this.state={
            toastVisible:false,
            toastMessage:""
        }
    }
    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
            })
        }
    }


    render(){
        return (
            <View style={styles.container}>
                <StatusBar barStyle="default"/>
                <AppNavigator />
                <Toast visible={this.state.toastVisible}
                    message={this.state.toastMessage}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1
    }
})

const mapStateToProps = state => ({ ...yourMapStateToProp })

const mapDispatchToProps = state => ({ ...mapDispatchToProps })

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer)

import React，{Component}来自“React”；
从“react native”导入{View，Stylesheet}；
从“路径/到/状态栏”导入状态栏；
从“路径/到/AppNavigator”导入AppNavigator；
从“path/to/Toast”导入Toast；
从“react redux”导入{connect}；
类AppContainer扩展组件{
建造师（道具）{
超级（道具）；
这个州={
toastVisible:false，
演讲信息：“
}
}
componentDidUpdate=（prevProps）=>{
if（this.props.redux_toast.visible！==prevProps.redux_toast.visible）{
这是我的国家({
toastVisible:this.props.redux_toast.visible，
toastMessage:this.props.redux_toast.message
})
}
}
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1
}
})
const mapStateToProps=state=>（{…yourMapStateToProp}）
const mapDispatchToProps=state=>（{…mapDispatchToProps}）
导出默认连接（mapStateToProps、mapDispatchToProps）（AppContainer）

---

其余的代码保持不变，您需要调度一个操作来更改appContainer的

componentDidUpdate

正在侦听的道具（在示例中，我称之为

redux\u toast.visible

）

听起来对我来说是个完美的解决方案。唯一的问题是，

AppNavigator

无法获得任何道具（因此我无法连接它）。我编辑了我的问题，所以你可以看到我在说什么。这不是AppNavigator的全部代码，但您可以理解。非常感谢。应该没有问题，只需导出连接它的AppContainer.js（新文件）。与导出默认连接（AppContainer）一样，

AppNavigator

（以及应用程序的其余部分）将保持不变。这是对

App.js

的重新修改，将其拆分为两个文件对不起，我不明白。你能给我举个例子或具体点吗？如何连接

AppNavigator

上的每个页面？谢谢这部分代码不会被触及，您应该在AppNavigator之外工作。您需要创建一个围绕appContainer的新组件。我会写一个关于itAMAZING的小例子！现在完全清楚了。所以我将有两个

MapStateTrops

和

mapDispatchToProps

（在AppContainer和AppNavigator内部），对吗？

import React, { Component } from "react";
import { View, Stylesheet } from "react-native";
import StatusBar from "path/to/StatusBar";
import AppNavigator from "path/to/AppNavigator";
import Toast from "path/to/Toast";
import { connect } from "react-redux";


class AppContainer extends Component {
    constructor(props){
        super(props);
        this.state={
            toastVisible:false,
            toastMessage:""
        }
    }
    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
            })
        }
    }


    render(){
        return (
            <View style={styles.container}>
                <StatusBar barStyle="default"/>
                <AppNavigator />
                <Toast visible={this.state.toastVisible}
                    message={this.state.toastMessage}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1
    }
})

const mapStateToProps = state => ({ ...yourMapStateToProp })

const mapDispatchToProps = state => ({ ...mapDispatchToProps })

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer)