Я использую, чтобы столкнуться с той же проблемой. Я заставил свой экран 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} />,
}
);
Так работает 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 ] это для получения дополнительной информации
Я пытался использовать метод, предложенный в ответах, но они не сработали в моем случае.
Решение:
Я попытался перевернуть 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);
Не уверен, что в том, что я сделал, что-то не так, но до сих пор оно работало нормально.