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>
    );
}

编辑：

AppNavigator.js：

// 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;

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

Answer 1

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

App.js

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

您的AppContainer将具有类似于以下内容的render方法：

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

编辑。

它应该是这样的：

//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>
  )
}

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)

其余代码保持不变，您需要调度一个动作来更改您的appContainer componentDidUpdate正在监听的道具（在我的示例中为redux_toast.visible）。

如何在React Native中向应用程序根发出事件

1 个答案: