Размонтирование или повторное отображение экрана в ящике навигатора

1
задан Michael Sivolobov 19 March 2019 в 09:06
поделиться

3 ответа

Я использую, чтобы столкнуться с той же проблемой. Я заставил свой экран Post прослушивать событие фокусировки навигации, вызванное react-nativation здесь вместо componentDidMount.

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const Post = () => (
  <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)} // 
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
    {/* 
      Your view code
    */}
  </View>
);

С помощью onDidFocus вы можете получить параметр навигации, получить данные и / или обновить состояние. При необходимости вы можете очистить состояние экрана нажатием onDidBlur.

Кроме того, вы можете сделать императивное кодирование как этот документ здесь

Обновление:

Кстати, мне интересно, почему вы поставили Post с Drawer? Это просто ссылка в ящике, которая может получить доступ к странице поста?

По моему мнению, вы должны переместить Home и Post в новый стек и сделать Home в качестве начального маршрута. Это обеспечит размонтирование Почты после перехода назад к Home.

Посмотрите мой образец ниже

const HomeStack = createStackNavigatior({
   Home: {screen: Home},
   Post: {screen: Post},
}, {
   initialRouteName: 'Home', 
   ...
})

const Drawer = createDrawerNavigator(
{
    HomeStack
    Settings: {screen: Settings}
},
{
    initialRouteName: "HomeStack",
    backBehavior: 'initialRoute',
    contentOptions: {
    activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />,
}
);
0
ответ дан Ponleu 19 March 2019 в 09:06
поделиться

Так работает react-navigation, чтобы противостоять этому, вы можете добавить слушателей, например:

<NavigationEvents
    onDidFocus={payload => { console.log(payload.state.params,'<- this has your new params') }}
/>

ИЛИ

 this.props.navigation.addListener('didFocus', payload=>{console.log(payload)})

Проверить [113 ] это для получения дополнительной информации

0
ответ дан MPN7 19 March 2019 в 09:06
поделиться

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

Решение:

Я попытался перевернуть createDrawerNavigator() с помощью createStackNavigator(), и это сработало идеально, как раньше! Мне не нужно использовать реагирующие навигационные события, нормальные события, такие как componentWillUnmount и componentWillMount, работают отлично.

const MainScreens = createStackNavigator(
{
   Home: {screen: Home},
   Post: {screen: Post},
   Settings: {screen: Settings}
},
{
   initialRouteName: "Home",
   headerMode: "none",
}
);

const AppNavigator = createDrawerNavigator(
{
   Main: {screen: MainScreens},
},
{
   initialRouteName: "Main",
   backBehavior: 'initialRoute',
   contentOptions: {
   activeTintColor: "#e91e63"
   },
   contentComponent: props => <SideBar {...props} />,
}
);

export default createAppContainer(AppNavigator);

Не уверен, что в том, что я сделал, что-то не так, но до сих пор оно работало нормально.

0
ответ дан Kash 19 March 2019 в 09:06
поделиться
Другие вопросы по тегам:

Похожие вопросы: