2017-09-13 12 views
1

私はReduxを学びたいので、カウンタ、todosのような簡単なアプリケーションの例を読んでいます。私はReduxを使って練習するだけの簡単なアプリを始めるので、私の最初の目標はHeaderのアイコンをクリックしてModal with Infoページを開くことです。show/close 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> 

    ); 
    } 
} 

答えて

1

まずあり例えば、isModalOpenedなどのフラグを保持するui状態を処理します。あなたはmapStateToProps関数のredux connectを介してMainContainerにこのフラグを渡す必要があります。次に、あなたのモーダルコンポーネントにこのフラグを渡したり、条件付きでモーダル・コンポーネントをレンダリングすることができ、次のいずれか

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

は、さらにあなたが切り替わりますどの、あなたのヘッダーが押されたときにディスパッチすることができますmapDispatchToPropsでアクションを渡す必要がありますあなたの減速機でisModalOpenedの状態。

1

概念的には、目的が学び、Reduxのを使用することであることを考えると、何がやりたいことは、これらの線に沿って何かである:mapStateToPropsを使用して、再来へ

  • あなたのモーダルコンポーネントを接続します(または親コンポーネント)、それで、modalIsVisibleのような小道具がRedux州から渡されます。最初にモーダルを非表示にする必要がある場合はfalseに初期化することができます。
  • mapDispatchToPropsを使用すると、少なくとも1つのコールバック(onToggleModalVisibilityなど)も渡します。このコールバックは、モーダルを開くためにボタンを押したとき(および別のボタンを押してモーダルを閉じるとき)に使用されます。コールバックはTOGGLE_MODAL_VISIBILITYのようなタイプのactionをディスパッチします。
  • reducerには、タイプTOGGLE_MODAL_VISIBILITYの操作を処理するロジックがあることを確認してください。この例では、論理は古い値を取り、それを否定することです。

その他の手順は、通常の反応コードです。

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

もちろんこれらの各ステップは、多くのサブステップを持っていますが、この一般的な概要から[何を検索するかを知ることができ、最大読んでください:あなたは、あなたが期待するように、のようなものがmodalIsVisibleonToggleModalVisibilityを使用しますに。

関連する問題