Question

我正在尝试学习Redux，所以我正在阅读简单的应用程序示例，例如计数器，待办事项。我开始一个简单的应用程序只是为了练习Redux，所以我的第一个目标是通过单击Header上的图标打开一个带有Info页面的Modal。

所以现在我完全感到困惑）有没有人有Modal打开/关闭的例子？或者只是帮我一个文本说明我应该做什么，什么动作，减速器，以及模态组件应该如何获得状态。

这只是未来应用的样板

 import React, { Component } from 'react';
    import { Content, Container } from 'native-base';
    import Header1 from '../components/Header.js';
    import ModalInfo from './ModalInfo.js';

        export default class MainContainer extends Component {
          render() {
            return (
              <Container>
               <ModalInfo />
               <Header1
                  onPress1={() => {

                  }}
               />
               <Content />
              </Container>
            );
          }
        }

带有目标图标的Header1.js

import React, { Component } from 'react';
import { Header, Left, Body, Right, Title, Icon, Button, H3 } from 'native-base';


export default class Header1 extends Component {

  render() {
    return (
      <Header backgroundColor='darkslateblue'>
        <Left>
          <Button
            transparent
            onPress={
            }
          >
            <Icon name='md-help-circle' />
          </Button>
         </Left>
         <Body>
          <Title />
         </Body>
         <Right />
         </Header>
    );
  }
}

ModalInfo.js

import React, { Component } from 'react';
import { Modal, Text, View, TouchableHighlight } from 'react-native';

export default class ModalInfo extends Component {
  render() {
      return (
        <Modal>

        </Modal>

    );
  }
}

Answer 1

首先你必须编写一个reducer，例如处理ui状态，它持有一个标志isModalOpened或类似的东西。您必须通过mapStateToProps函数中的redux connect将此标志传递给MainContainer。然后，您可以将此标志传递给Modal组件，也可以有条件地渲染Modal组件：

<Container>
  { this.props.isModalOpened ? <ModalInfo /> : null }
  ... other stuff
</Container>

此外，您必须在mapDispatchToProps中传递一个动作，您可以在按下Header时调度该动作，这将切换减速器中isModalOpened的状态。

Answer 2

从概念上讲，鉴于目的是学习和使用Redux，你想要做的就是这样做：

使用mapStateToProps将您的模态组件（或父组件）连接到Redux，以便从Redux状态获得传递给它的modalIsVisible等道具。（如果首先隐藏模态，您可以将其初始化为false
使用mapDispatchToProps您还会传递至少一个回调，例如onToggleModalVisibility。当您按下按钮打开模态时（以及当您按另一个按钮关闭它时）将使用该回调。回调调度的action类型为TOGGLE_MODAL_VISIBILITY。
在reducer中，您确保自己有逻辑来处理TOGGLE_MODAL_VISIBILITY类型的操作。在这个例子中，逻辑只是取旧值并否定它。

其他步骤只是常规的React代码。您可以像预期的那样使用modalIsVisible和onToggleModalVisibility，例如：

<Modal
      animationType="slide"
      transparent={false}
      visible={ this.props.modalIsVisible }
      onRequestClose={ this.props.onToggleModalVisibility }
</Modal>
<Button onClick={ this.props.onToggleModalVisibility }>Open modal</Button>

这些步骤中的每一步当然都有许多子步骤，但从这个总体概述中，您应该能够知道要搜索和阅读的内容。

使用React Native和Redux显示/关闭Modal

2 个答案: