React-native-router-flux: Принудительный повторный рендеринг сцены после поп

Созданный на 5 апр. 2016  ·  58Комментарии  ·  Источник: aksonov/react-native-router-flux

Привет,

Можно ли принудительно перерисовать сцену после нажатия кнопки «Назад» в предыдущем состоянии?

Спасибо

Самый полезный комментарий

Я наконец решу это, вызвав пустое обновление с реквизитом после задержки
Actions.popTo ('pageOne');
setTimeout (() => {
Actions.refresh ({имя: 'zzzzar'});
console.log ("zzzz");
}, 10);

Все 58 Комментарий

Спасибо за ответ, но не работает;)
Он не обновляет предыдущий вид ...

Я думаю, он должен обновить его, если что-то изменится в его состоянии. Поэтому установите случайное значение в обновлении

09 апреля 2016 года в 09:51 rtrompier [email protected] написал:

Спасибо за ответ, но не работает;)
Он не обновляет предыдущий вид ...

-
Вы получаете это, потому что подписаны на эту беседу.
Ответьте на это письмо напрямую или просмотрите его на GitHub https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment -207737400

Может ли кто-нибудь сказать мне, как обновить после Actions.pop ()?

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

@aksonov У меня та же проблема, что и у @ helloworld123456 и @rtrompier . Моя навигация выглядит следующим образом:

Сцена A => Сцена B => Сцена C

Когда я перехожу с C на B, мне нужно повторно визуализировать сцену B. Я вижу, что @ Elyx0 предложил использовать Actions.pop(); Actions.refresh(); У меня два вопроса:

  1. Будет ли вызов Actions.refresh() rerender сцены C или B?
  2. Можно ли переопределить обработчик onPress кнопки возврата на панели навигации? После просмотра кода не похоже, что это возможно.
  1. Он должен обновить B, но почему бы вам не проверить его и не узнать!
  2. Используйте renderBackButton чтобы передать свою собственную кнопку возврата, пользовательский onPress и все остальное.

Понятно - спасибо

@samdturner, ты можешь мне сказать, как?

Спасибо

@ alfan2305

Actions.pop();
Actions.refresh();

как насчет navBar ? Разве у нас не должно быть refresh=true на Scene . В противном случае мне придется переопределить onPress для backButton на функцию, которая вызывает два вышеуказанных вызова.

@ssomnoremac Что не так с переопределением кнопки? Довольно просто сделать. Если бы эта проблема была более популярной, я бы сказал, что мы добавляем функциональность, но это, похоже, крайний случай.

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

Я бы подумал, что ваш компонент регистрации получит изменение, слушая redux, не так ли? Или проблема в том, что сцена не перерисовывается после получения новых реквизитов, когда другой компонент лежит сверху?

Я имею в виду, что мы предоставляем onBack поэтому при определении сцены регистрации должно быть так же просто, как

const refreshOnBack = () => { Actions.pop(); Actions.refresh(); }

...
<Scene key="registration" component={Registration} onBack={refreshOnBack} />
...

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

Без проблем. Обязательно загляните на https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md, так как там есть большая гибкость, когда вы уходите из книги :)

Привет ребята,
Прежде всего: спасибо всем за ваши идеи, они действительно полезны, так как я новичок в кодировании реагирования и javascript.

Я только что опробовал решение "refreshOnBack" от @cridenour : к сожалению, я наткнулся на некоторые трудности.

Теперь кнопки вобще ничего не делают. Я просто остаюсь на своей сцене «C» (имея в виду пример
const refreshOnBack = () => { Actions.pop(); }
У меня ожидаемое поведение без обновления моего родительского представления.

Что мне не хватает? : /

У меня те же результаты, что и у @Brokray

Если вы отлаживаете удаленно, вы видите ошибку в консоли?

@cridenour ошибок в консоли нет.
Есть ли что-нибудь, что я могу войти в консоль, чтобы понять, что происходит? Может, что-то от редуктора?
Редуктор для меня все еще остается загадкой.

Спасибо.

Хм! Может быть, сначала попробуйте выполнить обновление.

Actions.refresh({key: 'yourSceneKey'}); Actions.pop();

Спасибо за помощь @cridenour : Я только что попробовал вашу идею, но, к сожалению, она тоже не работает. Я без проблем перехожу от C к B, но "B" не изменилась.
Похоже, проблема связана с методом refresh() : даже если я помещаю кнопку обновления в сцену 'B' (вызывая Actions.refresh() ), ничего не происходит.

@jholton Я не знаю, может ли это вам помочь, но: я нашел собственный способ обновить мою сцену:
У меня есть редуктор для каждой сцены (B и C), когда я вызываю свое действие POST в 'C', оба моих редуктора улавливают вызов, C делает то, что ему нужно, а B устанавливает переменную состояния ' обновить до true .
Таким образом, в «ComponentWillReceiveProps» элемента B я тестирую «обновление» и снова вызываю то, что мне нужно, для обновления сцены.

Если у кого-то есть более глубокое понимание проблемы Actions.refresh() , не сомневайтесь!
Спасибо.

@Brokray Интересно, что это не сработало, но все равно у вас есть лучшее решение. Я не верю в попытки использовать систему навигации для передачи состояния приложения - я всегда придерживаюсь хранилищ flux.

@Brokray, если это не так уж и сложно, можете ли вы привести пример? Как у вас есть редуктор для одной сцены? Я прочитал всю документацию, но на данный момент это немного выше моей головы.

@cridenour Да, я не хочу передавать состояние приложения как таковое. Я просто хочу, чтобы сцена B была повторно визуализирована.
В сцене B я отображаю некоторые данные из базы данных. В сцене C у меня есть форма, которая добавляет данные в базу данных. Когда пользователь возвращается к сцене B, я просто хочу, чтобы все методы жизненного цикла (например, getInitialState, componentWillMount и т. Д.) Сработали, чтобы новые добавленные данные были извлечены и отображены. Эти методы жизненного цикла не работают.

@jholton Правильно, и это render() ) и не будет зависеть от инициализации компонента. Многие проблемы реагирования в React становятся намного проще, если вы переместите уровень данных подальше от компонентов (а они просто читают данные и отображают их).

Тем не менее, Actions.refresh () вызовет только новые реквизиты и повторный рендеринг (опять же, просто render() ), но не вызовет componentWillMount и т. Д.

@jholton Ну, как сказал @cridenour, я использую реализацию потока (действительно, redux), которая позволяет вам управлять своими данными с помощью действий, состояния и редуктора. Когда вы познакомитесь с реализацией потока, я с радостью предоставлю вам пример!
@cridenour Еще раз спасибо за вашу помощь!

@Brokray Да, сейчас я погружаюсь в учебники Redux. Я вернусь к этой теме, когда смогу более разумно обсудить поток / редукцию. Спасибо.

удастся ли мне обновить реквизиты, но когда я снова пытаюсь перейти к следующему представлению, это дает мне ошибку
этот код написан на моем экране настроек
Actions.pop ();
Actions.refresh ({ключ: 'pageOne', имя: 'wwwww'});

Только это будет работать и обновлять представление, но когда я снова пытаюсь перейти на экран настроек, это дает мне ошибку
screen shot 2016-08-02 at 4 43 38 pm

Я наконец решу это, вызвав пустое обновление с реквизитом после задержки
Actions.popTo ('pageOne');
setTimeout (() => {
Actions.refresh ({имя: 'zzzzar'});
console.log ("zzzz");
}, 10);

@washaq : Это

@ ronyv89 рад, что это сработает для тебя, может ли кто-нибудь мне помочь? " https://github.com/facebook/react-native/issues/9280 "

Actions.pop (); Actions.refresh ();
просто обновите страницу, но не переходите к предыдущей сцене.

Было бы неплохо, если бы можно было обещать методы действий на основе, чтобы вы могли связать их вместе, например

Actions.pop().then(Actions.refresh()).

или

Actions.pop().refresh()

@israrhnrtech и @tuneZola не работают, если вы хотите вызвать обновление предыдущего, тогда вам нужно вызвать его после задержки, тогда он будет вызываться правильно, как это

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

Прежде всего, спасибо за ответ @tuneZola и @washaq .
Действия ('pageOne');
setTimeout (() => {
Actions.refresh ({имя: 'zzzzar'});
console.log ("zzzz");
}, 10);

этот код работает очень хорошо ..
еще раз спасибо ..

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

У меня такая же проблема на моих сценах:

А => В

в BI измените состояние моего хранилища redux, но когда я делаю Router.pop() , componentWillReceiveProps не запускается на A.

Мой router.pop находится локально внутри страницы B (без использования панели навигации по умолчанию), поэтому

Router.pop()
Router.refresh()

не работает, установка тайм-аута тоже не работает, есть идеи, как этого добиться?

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

Actions.pop();
setTimeout(() => {
Actions.refresh({name:'zzzzar'});
console.log("zzzz");
}, 10);

в этом я передаю имя в качестве реквизита в моем основном представлении, что означает, что если я использую this.props.name для обновления текста, то его обновленное вам нужно передать обновленное состояние в качестве реквизита в обновлении, потому что именно так представление узнает его обновленное.
Надеюсь, что это поможет вам

Для меня это сработало:
navigator.replacePreviousAndPop (previousRoute);

@phpscrpt , не могли бы вы подробнее рассказать о некоторых кодах, как это работает?

@israrhnrtech, извините, это для встроенного компонента Navigator в

@washaq Решение тайм-аута, реализованное ниже, у меня не работает:

backAndRefresh () {

Actions.pop ();
setTimeout (() => {
Actions.refresh ({имя: 'zzzzar'});
console.log ("zzzz");
}, 10);

}

ВЕРНУТЬСЯ И ОБНОВИТЬ

КомпонентDidMount на странице, которую я хочу обновить, не вызывается.

Я что-то упускаю?

Спасибо!

@ivansifrim вы нашли решение для этого?
мы также пытаемся найти способ вызвать действие после приземления на экран

У меня это работает: Actions.pop ({refresh: {}});
Он открывает текущий экран и обновляет родительский экран.

@JeroenNelen - я еще не @Bertjuhh

Любое решение упомянутой проблемы?

У меня это хорошо работает:

const refreshOnBack = () => { Actions.pop({ refresh: {} }); }
...
// child scene
<Scene key="settings" component={SettingsScreen} onBack={refreshOnBack}/>
...

В простом приложении, которое я недавно сделал, я обошел это следующим образом (этот код находится в моем файле маршрутизатора над экспортом):

Actions.pop = () => Actions.NAME_OF_PREVIOUS({ type: ActionConst.RESET });

Вам нужно будет выполнить некоторую условную логику в функции, которую вы используете для переопределения pop . Прекрасно сработало в моем случае (если я не возражаю против альтернативного обратного перехода при использовании ActionConst.RESET ). Быстро противно.

Наконец-то что-то здесь работает хорошо? Ни одно из вышеперечисленных предложений на самом деле не работает ...

+1

@ivansifirm, он должен работать в последний раз, я использовал его, помните, при обновлении пропустите реквизиты, которые вы хотите изменить. Т.е. выше 'name' - это реквизиты, которые я хочу, чтобы вы обновили в моем предыдущем представлении

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

Вот мой код. (В моем случае есть сцены A и B, A => B с помощью навигации, B => A с помощью всплытия)

Сцена А:
componentWillReceiveProps(nextProps) { if (this.props.test !== nextProps.test) { this._getUser() // I need call this func after pop } }
Сцена Б

NavigationActions.pop({refresh:{test:true}})

Что со мной не так ?
Спасибо.

NavigationActions.pop ({refresh: {test: true}})

ты можешь изменить это на

NavigationActions.pop ({обновить: {тест:! Тест}})

Во вторник, 20 июня 2017 г., в 19:29, MobileStar [email protected]
написал:

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

Вот мой код. (В моем случае есть сцены A и B, A => B по навигации,
B => A, попав)

Сцена А:

componentWillReceiveProps (nextProps) {
if (this.props.test! == nextProps.test) {
this._getUser () // Мне нужно вызвать эту функцию после pop
}
}

Сцена Б

NavigationActions.pop ({refresh: {test: true}})

Что со мной не так ?
Спасибо.

-
Вы получаете это, потому что подписаны на эту беседу.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/aksonov/react-native-router-flux/issues/465#issuecomment-309945049 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/AExqB3CZM4U1yuwKslfuBj88uVVJulGtks5sGIAbgaJpZM4H_0pN
.

@nikitph Спасибо за вашу помощь.
Да, я пробовал с этим.
Но componentWillReceiveProps не всегда срабатывает после pop.
Не могли бы вы сообщить мне, когда срабатывает componentWillReceiveProps или когда после pop запускается другая функция жизненного цикла?
С Уважением.

@SelfnessAid ах, теперь я вспомнил, почему отказался от решения этой проблемы. У меня была похожая проблема. «Но componentWillReceiveProps не всегда срабатывает после pop». Я думаю, что я обошелся с этим, имея индекс прокручиваемого представления, которое у меня есть на целевой странице, для обновления. да, это отстой, но я решаю свою проблему.

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

Мне нужно было вызывать функцию выборки всякий раз, когда я выполнял Action.scene() или Action.pop() . Эта выборка изначально вызывалась в методе componentWillMount, но поскольку она не вызывается при использовании Action.pop() я изменил все свои вызовы Action.scene() и Action.pop() на 2 пользовательские функции, которые являются действиями, которые означает, что у меня больше контейнеров redux, чем обычно, но эх: /. Итак, вот они:

const goTo = (scene, label, sceneParams = {}, pushed = true) => ( // Equivalent of `Action.scene()`
   (dispatch) => {
     dispatch(setAppLabel(scene, label, sceneParams, pushed)); // I'm storing some infos about the scene in my store. Will be used in custom `pop()` later.
     mapSceneToAction(scene, dispatch, sceneParams); // // Calls the function initially used in the componentWillMount. I'll show a sample further
     Actions[scene](sceneParams);
   }
);

const pop = () => (  // Equivalent of `Action.pop()`
   (dispatch, getState) => {
     Actions.pop();
     mapSceneToAction(getState().sceneReducer.previousScene, dispatch, getState().sceneReducer.previousScene.itemProps); // Retrieving some infos stored in the store during `goTo()`
   }
);

А вот как выглядит mapSceneToAction ():

const mapSceneToAction = (scene, dispatch, itemProps) => {
  switch (scene) {
    case 'events':
      dispatch(fetchEvents()); // Or any other action :P
      break;
    case 'anyScene':
      dispatch(anyAction(withAnyParams));
      break;
    default:
  }
};

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

Передайте опору функции в следующую сцену ..
Действия.YourRoute ({onPress: () => setState ..});

Затем в следующей сцене вызовите функцию prop
this.props.onPress ();

@ bethuel11 Это повторный рендеринг компонента в цикле. Хотя не очень хорошее решение

я нашел простой трюк ...

текущее состояние / текущая страница =>

Actions.pop ();
setTimeout (() => {
Actions.refresh ({
isRefresh: правда,
});
}, 0);

предыдущее состояние / страница => внутри рендера добавить условие ниже,

if (this.props.isRefresh) {
Actions.refresh ({
isRefresh: ложь,
});
// если вы вызываете здесь состояние set, оно автоматически перерисовывает себя ...
this.setState ({isloading: true});

Спасибо.
}

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

sreejithr picture sreejithr  ·  3Комментарии

wootwoot1234 picture wootwoot1234  ·  3Комментарии

sarovin picture sarovin  ·  3Комментарии

tonypeng picture tonypeng  ·  3Комментарии

xnog picture xnog  ·  3Комментарии