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

Question

Я недавно добавил навигатор ящиков и обернул свои экраны в createDrawerNavigator()

Это мои текущие маршруты:

• Home.js
• Post.js
• Settings.js

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

onPress={() => this.props.navigation.navigate('Post', {postData: postData})}

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

Моя проблема заключается в том, что при реализации ящика экран Запись не отключается при переходе обратно к home , я снова и снова получаю один и тот же реквизит и экран первого поста.

Это мой маршрут:

import React from "react";
import { createDrawerNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './screens/Home';
import Post from './screens/Post';
import Settings from './screens/Settings';
import SideBar from './screens/sidebar';

const Drawer = createDrawerNavigator(
{
    Home: {screen: Home},
    Post: {screen: Post},
    Settings: {screen: Settings}
},
{
    initialRouteName: "Home",
    backBehavior: 'initialRoute',
    contentOptions: {
    activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />,
}
);

const AppNavigator = createStackNavigator(
    {
    Drawer: {screen: Drawer},
    },
    {
    initialRouteName: "Drawer",
        headerMode: "none",
    }
);

export default createAppContainer(AppNavigator);

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

Я хочу, чтобы каждый экран сообщений открывался и отображался как новый при переходе на него из Home.

Answer 1

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

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

ИЛИ

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

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

Answer 2

Я использую, чтобы столкнуться с той же проблемой. Я заставил мой экран 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} />,
}
);

Answer 3

Я потерял несколько часов на этом после обновления React Navigation с 2.14.2 до 3.11.0. Самое смешное, что он работал отлично, и после обновления страницы не перерисовывали, что приводило к неправильному языку, а не к фактическим данным на страницах. Я обнаружил, что проблема Экран DrawerNavigator не должен отключаться

Таким образом, часть из нас жалуется, почему он не перерисовывает экраны, а часть жалуется, почему он перерисовывает. Вторая часть выиграла битву:)

В основном решение было таким, как и ожидалось: прослушать событие WillFocus ... Просто добавьте это в код вашего компонента, если вы хотите, чтобы он повторялся при каждом посещении.

 /**
 * When using React Navigation Component is not umnounted and instead stored in navigator. 
 * We need component to be rerendered during each visit to show right info and language
 */
componentDidMount() {
    //this.props.navigation will come in every component which is in navigator
    focusSubscription = this.props.navigation.addListener(
        'willFocus',
        payload => {
            this.forceUpdate();//Native react function to force rerendering
        }
    );
    this.setState({focusSubscription: focusSubscription});
}

componentWillUnmount() {
    this.state.focusSubscription.remove();
}

Answer 4

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

Решение:

Я пытался перевернуть 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);

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