показать / закрыть модал используя React Native и Redux

Question

показать / закрыть модал используя React Native и Redux

1

Я пытаюсь изучить Redux, поэтому я читаю о простых примерах приложений, таких как счетчики, todos. Я начинаю простое приложение, чтобы тренироваться с Redux, поэтому моя первая цель - открыть страницу Modal с Info, щелкнув значок в заголовке.

Так что теперь я полностью смущаюсь). Есть ли у кого-нибудь пример Модального открытия/закрытия? Или просто помогите мне с текстовой инструкцией, что я должен делать, какие действия, редукторы и как Модальный компонент получит состояние.

Вот только шаблон для будущего приложения

 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>

    );
  }
}

nastassia 13 сен. 2017, в 14:01

Источник

Теги:

javascript

react-native

react-redux

redux

2 ответа

Ещё вопросы

jonahe · Answer 1 · 2017-09-13T10-17-00.000Z

Концептуально, учитывая, что целью является изучение и использование Redux, то, что вы хотите сделать, - это что-то в этом роде:

Подключите свой модальный компонент (или родительский компонент) к Redux, используя mapStateToProps, чтобы он получил пропущенную modalIsVisible например modalIsVisible переданную ей из состояния Redux. (Вы можете инициализировать его на 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>

Конечно, каждый из этих шагов имеет множество подэтапов, но из этого общего обзора вы должны знать, что искать и читать.

justadudewhohacks · Answer 2 · 2017-09-13T10-09-00.000Z

Сначала вам нужно написать редуктор, который, например, обрабатывает состояние ui, в котором находится флаг isModalOpened или что-то в этом роде. Вы должны передать этот флаг своему MainContainer через соединение redux в вашей функции mapStateToProps. Затем вы можете передать этот флаг вашему модульному компоненту или условно отобразить компонент Modal:

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

Кроме того, вам необходимо передать действие в mapDispatchToProps, которое вы можете отправить при нажатии заголовка, который будет переключать состояние вашего isModalOpened в вашем редукторе.