Javascript 使用React Native和Redux显示/关闭模式_Javascript_React Native_Redux_React Redux

Javascript 使用React Native和Redux显示/关闭模式

javascript react-native redux

Javascript 使用React Native和Redux显示/关闭模式,javascript,react-native,redux,react-redux,Javascript,React Native,Redux,React Redux,我正在尝试学习Redux，所以我正在阅读一些简单的应用程序示例，比如计数器、TODO。我启动一个简单的应用程序只是为了练习Redux，所以我的第一个目标是通过单击标题处的图标打开一个带有信息的模式页面所以现在我完全糊涂了）有人举一个模式打开/关闭的例子吗？或者只是用一个文本说明来帮助我，我应该做什么，什么动作，减缩器，以及模态组件应该如何获得状态这里只是未来应用程序的样板 import React, { Component } from 'react'; import { Cont

我正在尝试学习Redux，所以我正在阅读一些简单的应用程序示例，比如计数器、TODO。我启动一个简单的应用程序只是为了练习Redux，所以我的第一个目标是通过单击标题处的图标打开一个带有信息的模式页面

所以现在我完全糊涂了）有人举一个模式打开/关闭的例子吗？或者只是用一个文本说明来帮助我，我应该做什么，什么动作，减缩器，以及模态组件应该如何获得状态

这里只是未来应用程序的样板

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

import React，{Component}来自'React'；
从“本机基”导入{Content，Container}；
从“../components/Header.js”导入Header1；
从“/ModalInfo.js”导入ModalInfo；
导出默认类MainContainer扩展组件{
render（）{
返回(
{
}}
/>
);
}
}

带有目标图标的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>
    );
  }
}

import React，{Component}来自'React'；
从“本机基础”导入{标题、左侧、正文、右侧、标题、图标、按钮、H3}；
导出默认类Header1扩展组件{
render（）{
返回(
);
}
}

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>

    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{模式、文本、视图、TouchableHighlight}；
导出默认类ModalInfo扩展组件{
render（）{
返回(
);
}
}

首先，您必须编写一个reducer，例如处理ui状态，其中包含一个标志isModaloped或类似的内容。您必须通过MapStateTops函数中的redux connect将此标志传递给MainContainer。然后，可以将此标志传递给模态组件，也可以有条件地呈现模态组件：

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


{this.props.ismodaloped？：null}
... 其他东西

此外，您必须在mapDispatchToProps中传递一个操作，当按下标题时可以发送该操作，该操作将切换减速机中IsModaloped的状态。

从概念上讲，鉴于其目的是学习和使用Redux，您希望做的事情如下：

使用
```
mapstatetops
```
将模态组件（或父组件）连接到Redux，以便它从Redux状态获得一个类似
```
modalisivable
```
的道具。（如果首先应该隐藏模式，则可以将其初始化为
```
false
```
）
使用
```
mapDispatchToProps
```
还可以传递至少一个回调，如
```
onToggleModalVisibility
```
。当您按下按钮打开模式时（以及当您按下另一个按钮关闭模式时），将使用该回调。回调将发送一个
```
操作
```
，其类型类似于
```
TOGGLE\u model\u VISIBILITY
```

在

reducer

中，确保有逻辑来处理类型为

的操作，即切换模式可见性。在这个例子中，逻辑是取旧值并取反


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