React-native-router-flux: Улучшение документации о том, как реализовать модальные окна

Для ясности: я новичок, а то отправил бы пиар 👍

Согласен. Также кажется, что этот пример устарел по сравнению с текущим API.

Попытка использовать модальные окна, как показывает пример кода. И это приводит к сбою всего приложения (на уровне API 19) при использовании с представлением с https://github.com/FaridSafi/react-native-gifted-messenger.

@sondremare Проверить Пример проекта, работает ли модальный

Согласитесь, тоже немного запутались в модальном использовании.
При использовании модального окна как способа сообщения пользователю о статусе приложения, например, «Сбой сетевого подключения» и т. Д.
отображение модального окна работает нормально, я могу показывать его на каждом экране во время навигации пользователя.
Однако, поскольку Actions.pop () (или, возможно, ActionConst.BACK в последней версии) используется для отклонения модального окна, если я нажимаю другой маршрут в стек, а затем пытаюсь отклонить модальный, он вместо этого выталкивает последний добавленный маршрут из стека. и модальный застрял там

Есть ли лучший способ реализовать или, например, можно переопределить onNavigate в модальном компоненте? Я попытался добавить его в качестве опоры в сцену, но это помешало отрисовке компонента.
Например

      <Router createReducer={this.reducerCreate.bind(this)} >
        <Scene key="modal" component={Modal} >
          <Scene key="root">
            <Scene key="loginScreen" hideNavBar={true} initial={this.state.needSignIn} 
              component={LoginScreen} type="reset" duration={200} />

          </Scene>
            <Scene key="statusModal" component={StatusModal} 
               onNavigate={ ()=> Actions.loginScreen()}/>
        </Scene>
      </Router>

РЕДАКТИРОВАТЬ: вместо использования Actions.pop () для отклонения модального окна я установил логическое значение {hide: true} для StatusModal, чтобы вернуть пустое представление или, если есть ошибка, передать 'Actions.statusModal ({error: error, hide : false}) ', чтобы отобразить модальное окно с ошибкой.

У меня проблемы с Actions.pop () при переключении вкладок при открытом модальном окне.

Есть ли действие для закрытия модального окна или что @charpeni

@heat @charpeni @cridenour Я попытался отправить запрос на

import StatusModal from './components/StatusModal'

<Router>
  <Scene key="modal" component={Modal} >
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
      <Scene key="statusModal" component={StatusModal} />
  </Scene>
</Router>

Затем в компоненте StatusModal мы можем определить, как мы хотим, чтобы он выглядел, и какие реквизиты могут быть переданы ему:

class StatusModal extends Component {

  constructor(props) {
    super(props)
    // set state with passed in props
    this.state = {
      message: props.error,
      hide: props.hide,
    }
    // bind functions
    this.dismissModal = this.dismissModal.bind(this)
  }

  dismissModal() {
    this.setState({hide: true})
  }

  // show or hide Modal based on 'hide' prop
  render() {
    if(this.state.hide){
      return (
        <View>
        </View>
      )
    } else {
        return (
          <TouchableHighlight style={styles.mainContainer} onPress={this.dismissModal}>
            <Text style={styles.text}>{this.state.message}</Text>
          </TouchableHighlight>
        )
      }
  }
}

Наконец, при вызове модального окна передайте свойства, определенные в компоненте, например, сообщение об ошибке и свойство hide, равное false, чтобы отобразить модальное окно:

Actions.statusModal({error: "Network failed...", hide: false})

При нажатии модального окна для скрытия будет установлено значение true, и будет возвращено пустое представление.

Привет,

У меня точно такой же код, как у @ brien-crean, но я получаю такую ​​ошибку: снимок экрана .

Что я делаю не так?

Спасибо,
Даниэль

Я попробую сложить еще раз, пока не взорвется. Actions.modalApp(); Actions.pop()

У меня точно такая же проблема. Техника сокрытия в ed28f7f работает, но в любом случае нарушает поведение Action.pop , по крайней мере, для первого вызова после представления модального окна.

Одним из решений для этого было бы, чтобы Actions.ACTION_NAME возвращал ссылку, которая может быть передана в Actions.pop($REF) . Мысли?

@ brien-crean, я пытаюсь скрыть модальное окно Действиями. statusModal ({hide: true}), но не удалось, рендеринг StatusModal действительно возвращает пустое представление, но модальное окно все еще отображается на экране, поэтому оно устало.

@omeid @ flare216 да, к сожалению, в моем решении есть недостаток, модальное окно никогда не выскакивает из стека, поэтому оно появится только один раз, другие нажатия модального окна приведут к ошибке.

Я пытался создать другое решение, но пока безуспешно.

Потенциальные решения может быть возможность удаления сцены из стека по имени (после проверки того, что она существует в стеке), а @aksonov предложил , например , removeScene (ACTION_NAME) или решение , которое @omeid предложенное выше, либо будет работать. К сожалению, я не знаю, смогу ли я разобраться сам

Я добавил Actions.get (ACTION_NAME) для получения реквизита сцены с ACTION_NAME. Таким образом, вы можете сохранить все во время отображения этой сцены, включая ссылки, используя Actions.refresh ({key: ACTION_NAME, ref: this.refs.REF_NAME}), а затем используйте Actions.get (ACTION_NAME) .ref из любого другого действия

Спасибо @aksonov , я

Как сделать прозрачный фон на моем модальном окне?

Стоит ли использовать Modal из react-native ?

Меня до сих пор полностью смущают модальные окна с этим Роутером.

Подробный пример в документации показывает, что модальные окна действуют как компонент Modal React Native - это то, что я хочу. Когда я вызываю Actions.login чтобы открыть экран входа в систему, я хочу, чтобы он всплывал поверх содержимого текущей страницы - это означает, что я могу проверить, аутентифицирован ли пользователь, а если нет, отобразить экран входа в систему, чтобы аутентифицировать их на месте.

Это возможно? В примере это выглядит просто, но я не могу заставить модальные окна быть чем-то большим, чем небольшой кусок <View> который просто появляется в нижней части экрана при срабатывании триггера.

Что мне не хватает? Я хотел бы знать, чтобы я мог внести свой вклад в документацию.

Если представление отображается, значит, маршрутизатор выполняет свою работу, и этому представлению просто необходимо стилизовать. Позиционируйте абсолютное, верхнее, левое, правое, нижнее все на 0.

@cridenour абсолютная позиция не должна использоваться по умолчанию?

как насчет прозрачного фона, возможно ли это без использования <Modal> из react-native ?

@cridenour подробный пример показывает, что он появляется с использованием анимации скольжения снизу, и я не вижу в примере ничего, что влияет на этот переход - поэтому я предположил, что он был частью маршрутизатора?

Достаточно справедливо, если это работает, но я думаю, что из этого примера может показаться, что вы можете перейти к нативным модальным окнам.

Я считаю, что прозрачный фон возможен, так как сделал это случайно. Однако я использую мобильный телефон и не могу привести пример. Но что касается позиционирования, по умолчанию используется fluxbox, но вы можете вручную установить его абсолютное значение.

С направлением в модальном представлении в вашей конфигурации сцены просто установите direction="vertical" и это должно сработать.

Красиво, спасибо :) Я попробую после того, как пройдусь 🐶

Я попытался добавить свойство getSceneStyle в свой RouterWithRedux, но у меня возникла та же проблема, что и у @ Daniellt1 : «Объекты недействительны как дочерние элементы React (найдено: объект с ключами {...»)

Настолько жестоко, что заставить модальный работать так сложно: s

Вот метод рендеринга моего файла index.ios.js

render() {
  return (
    <Provider store={store}>
      <AppDrawersContainer>
        <RouterWithRedux hideNavBar={true} getSceneStyle={getSceneStyle}>
          <Scene key="modal" component={Modal}>
            <Scene key="root" renderTitle={() => { return <AppLogo /> }}>
              ... other scenes ...
            </Scene>
            <Scene key="statusModal" component={StatusModal} />
          </Scene>
        </RouterWithRedux>
      </AppDrawersContainer>
    </Provider>);
}

StatusModal является прямой копией представленного в примере.

Если я уберу эту сцену, я не получу ошибки, но, конечно, модальное окно не загрузится.

<Scene key="modal" component={Modal}>

Версии:
реагировать-родной: v0.34.0-rc.0
response-native-router-flux: v3.34.0 (понижена с 3.35.0 из-за другой проблемы)

Подождите, почему у вас на роутере getSceneStyle ? Я не думаю, что это работает на роутере, только сцены.

https://github.com/aksonov/react-native-router-flux/blob/822e83f08f5063cd33bc0c92030311c9acafb2af/Example/Example.js#L107

Ах, вы правы - извините. Возможно, вместо того, чтобы вкладывать сцены в объект Router, передайте их с помощью scenes prop и Actions.create

В итоге я выбрал react-native-simple-modal. Мне понравилось, насколько легко это было реализовать, и он довольно эффективно обрабатывает очередь модальных окон и не вызывает каких-либо странных проблем с маршрутизацией, с которыми, похоже, сталкивались люди.

У меня были те же проблемы, но я понял, что импортирую Modal из react-native вместо response-native-router-flux.

@robinweston, это

Я попытался сделать PR, чтобы обновить документы, чтобы они были немного более информативными, не уверен, правильно ли я сделал, но, похоже, у меня не было разрешения. Я предложил изменить первый блок кода в модальном примере на следующий:

import React, { Component } from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import {
  Actions,
  Router,
  Scene,
  Modal // Note that this needs to be our implementation of modal, not React-Native's
} from 'react-native-router-flux';
import StatusModal from './components/StatusModal'

export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="modal" component={Modal} >
          <Scene key="root">
            <Scene key="screen1" initial={true} component={Screen1} />
            <Scene key="screen2" component={Screen2} />
          </Scene>
          <Scene key="statusModal" component={StatusModal} />
        </Scene>
      </Router>
    );
  }
}

class Screen1 extends Component {
  render() {
    return (
      <View style={{margin: 128}}>
        <Text onPress={() => Actions.statusModal({error: "Network failed...", hide: false})}>This is Screen1!</Text>
      </View>
    )
  }
}

class Screen2 extends Component {
  render() {
    return (
      <View style={{margin: 128}}>
        <Text onPress={() => Actions.statusModal({error: "Network failed...", hide: false})}>This is Screen2!</Text>
      </View>
    )
  }
}

Этот файл должен быть пригоден для копирования и вставки пользователем, пока присутствует и действителен StatusModal . Если это слишком многословно, я думаю, что даже такая простая вещь, как приведенная ниже, будет большим улучшением, потому что я не знал, что в этом проекте есть модальный компонент, пока я не добрался до этой темы.

import { Modal } from 'react-native-router-flux';
import StatusModal from './components/StatusModal'

export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="modal" component={Modal} >
          <Scene key="root">
            <Scene key="screen1" initial={true} component={Screen1} />
            <Scene key="screen2" component={Screen2} />
          </Scene>
          <Scene key="statusModal" component={StatusModal} />
        </Scene>
      </Router>
    );
  }
}

Кстати, я не смог найти стили, на которые есть ссылки в компоненте StatusModal , было бы неплохо либо удалить ссылки на них, либо определить их в примере, так как сейчас он вылетает.

@sibelius Вы нашли способ

Я использую компонент Modal из ядра react-native

На основании этой заметки @aksonov от июля:

Я добавил Actions.get (ACTION_NAME) для получения реквизита сцены с ACTION_NAME. Таким образом, вы можете сохранить все во время отображения этой сцены, включая ссылки, используя Actions.refresh ({key: ACTION_NAME, ref: this.refs.REF_NAME}), а затем используйте Actions.get (ACTION_NAME) .ref из любого другого действия

Это решение проблемы с невозможностью pop () модального окна? У меня та же проблема, что и описанная выше, когда работает первое представление модального окна, но любые другие попытки загрузить модальное окно вызывают ошибку дублирования ключа. Пытаюсь понять, как открыть модальное окно при его скрытии.

Является ли цель этого модального окна обработкой как родным модальным окном для устройства, на котором он работает? Кажется, я не могу получить ничего, кроме представления, говорящего о 50% своего контейнерного представления. Это точная функция из коробки?

@danmatthews Удалось ли тебе это

Если представление отображается, значит, маршрутизатор выполняет свою работу, и этому представлению просто необходимо стилизовать. Позиционируйте абсолютное, верхнее, левое, правое, нижнее все на 0.

@cridenour Если это применимо к стилю, можно ли это предложить для функциональности по умолчанию, поскольку именно так модальные окна ведут себя изначально? Включая панель навигации.

@ryancoughlin Это предложение было для их конкретного случая. Если вы ознакомитесь с приложением Example, то модальный пример (Login) не требует такого стиля.

Ой, здорово, это было очень полезно. Похоже, трюк заключался в том, чтобы вложить его в другую сцену.

отправлено из моего Айфона

3 марта 2017 г. в 17:57 Крис Риденур [email protected] написал:

@ryancoughlin Это предложение было для их конкретного случая. Если вы ознакомитесь с приложением Example, то модальный пример (Login) не требует такого стиля.

-
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub или отключите чат.

@ryancoughlin, я решили .

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

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    bottom: 0,
    right: 0,
    left: 0,
    backgroundColor: 'rgba(0,0,0,0)',
  },

который (из примера) прикреплен к TouchableHighlight

<TouchableHighlight style={styles.container} onPress={this.dismissModal}>
        <Text style={styles.text}>{this.state.message}</Text>
</TouchableHighlight>

Я также изменил dismissModal, чтобы он имел Action.pop () .. так как после скрытия он не возвращается.

  dismissModal() {
    Actions.pop();
    this.setState({ hide: true });
  }

... setState здесь вообще не нужен.