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

我在学习Redux，所以我正在阅读简单的应用示例，如计数器，待办事项。我开始一个简单的应用程序只是为了与Redux一起练习，所以我的第一个目标是通过单击标题中的图标打开带有信息页的Modal。显示/关闭使用React Native和Redux的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> 

    ); 
    } 
}

来源

2017-09-13 nastassia

首先一个样板，你必须写一个减速例如处理ui状态，该状态持有一个标志isModalOpened或类似的东西。您必须通过您的mapStateToProps函数中的redux连接将此标志传递给MainContainer。然后，你可以将此标志传递到您的模态分量或有条件地呈现莫代尔成分：

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

而且你必须通过你的mapDispatchToProps一个动作时，按下你的头，你可以派遣，这将切换您的减速器中isModalOpened的状态。

来源

2017-09-13 11:41:28 justadudewhohacks

概念，因为这样做的目的是学习和使用终极版，你想要做的是沿着这些路线的东西：

连接您的模态分量（或父组件）到终极版，使用mapStateToProps，以便从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>

的每个步骤，当然有很多的子步骤，但是从这个总体概述，你应该能够知道该怎么寻找和阅读起来上。

来源

2017-09-13 11:45:02 jonahe

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

回答

相关问题