我正在尝试学习 Redux,因此我正在阅读一些简单的应用程序示例,例如计数器、待办事项。我启动了一个简单的应用程序只是为了练习 Redux,所以我的第一个目标是通过单击标题处的图标打开带有信息的 Modal 页面。
所以现在我完全困惑了)有人有模态打开/关闭的例子吗?或者只是帮助我用文本指示我应该做什么,什么操作,reducer,以及 Modal 组件应该如何获取状态。
这只是 future 应用程序的样板
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>
);
}
}
最佳答案
从概念上讲,鉴于目的是学习和使用 Redux,您想要做的事情是这样的:
- 使用
mapStateToProps
将模态组件(或父组件)连接到 Redux,以便它获得从 Redux 状态向下传递给它的modalIsVisible
之类的 prop 。 (如果首先应隐藏模态框,您可以将其初始化为false
) - 使用
mapDispatchToProps
,您还可以传递至少一个回调,例如onToggleModalVisibility
。当您按下按钮打开模式时(以及当您按下另一个按钮关闭它时),将使用该回调。该回调会调度一个类型类似于TOGGLE_MODAL_VISIBILITY
的action
。 - 在您的
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>
当然,每个步骤都有许多子步骤,但从这个总体概述中,您应该能够知道要搜索和阅读的内容。
关于javascript - 使用 React Native 和 Redux 显示/关闭 Modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46195898/