找不到＆＃34; store＆＃34;显示模态

Question

这是我应用的起点：

const App = () => (
    <Provider store={store}>
        <StackNav />
    </Provider>
);

AppRegistry.registerComponent('MyApp', () => App);

对于StackNav，我有以下配置：

const routeConfiguration = {
    TO_LOGIN: { screen: Login },
    TO_HOME: { screen: Home },
};

const stackNavigatorConfiguration = {
    headerMode: 'screen',
    navigationOptions: {
        header: null,
    }
};

Inside Login屏幕我显示了一个模态，我不能使用react-redux的connect方法。这是完整的错误：

以下是我尝试使用它的方法：

class SignModal extends Component {

}

export default connect()(SignModal);

可能是什么原因？先谢谢你了！

Answer 1

模态将存在于当前组件层次结构之外。该模式称为Portal。这意味着它无法访问React上下文，因此无法找到Redux存储。目前，React Native中没有API来解决此问题。您需要明确地将商店作为道具传递。

可能更好的方法是连接具有Modal的组件，并将所需的值作为props传递给内部组件。

Answer 2

你试过吗

export const mapStateToProps = (state) => {
  return {
    //what you want from the store
  }
} 

然后

export default connect(mapStateToProps)(SignModal);

Answer 3

这是可能的。将您的模态用作视图组件并创建一个连接的容器组件。

// components/Modal.js

class Modal extends Component {
    render() {
        <Modal />
    }
}

export default Modal

// containers/ModalContainer

import Modal from "../components/Modal"

const mapState = state => ...
const mapDispatch = dispatch => ...

export default connect(mapState, mapDispatch)(Modal)

使用时从“ ../containers/ModalContainer”导入模态。