顯示/關閉使用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

回答

相關問題