보기/닫기 React Native와 Redux를 사용하는 모달

저는 Redux를 배우려고합니다. 따라서 카운터, todos와 같은 간단한 응용 프로그램 예제를 읽습니다. Redux로 연습 할 수있는 간단한 응용 프로그램을 시작 했으므로 첫 번째 목표는 헤더의 아이콘을 클릭하여 모달 정보 페이지를 여는 것입니다.보기/닫기 React Native와 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> 
      ); 
      } 
     }

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

우선 단지 상용구이다 예를 들어 플래그 isModalOpened 또는 이와 유사한 것을 유지하는 UI 상태를 처리합니다. mapStateToProps 함수에서 redux connect를 통해이 플래그를 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과 같은 콜백을 하나 이상 전달할 수 있습니다. 이 콜백은 버튼을 눌러 모달을 열 때 (그리고 다른 버튼을 눌러 닫을 때) 사용됩니다. 콜백은 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>

과정의 각 단계는 많은 하위 단계가 있지만,이 일반적인 개요에서 당신이 검색하고 읽어 무엇을 알고 할 수 있어야한다 : 당신은 당신이 기대처럼 modalIsVisible 및 onToggleModalVisibility, 같은 것을 사용 에.

출처

2017-09-13 11:45:02 jonahe

보기/닫기 React Native와 Redux를 사용하는 모달

답변

관련 문제