Как я могу перезагрузить экран, уже загруженный в BottomTabNavigator?

Question

У меня есть 5 экранов внутри BottomTabNavigator, один из которых отображает некоторые данные, извлеченные из базы данных, другой используется для сохранения новых данных в той же базе данных. когда я возвращаюсь к экрану со списком данных (если он уже был загружен), он не обновляется новыми данными, поскольку экран уже загружен. Есть ли способ перезагрузить мой компонент каждый раз, когда я нажимаю на одну из кнопок моей вкладки? Заранее спасибо.

TabNavigator = createBottomTabNavigator({
        Descriptif,
        Chrono,
        Session: { screen: () => <Session myPath={this.state.myPath} /> },
        Resultats: { screen: ({ navigation }) => <Resultats navigation={navigation} myPath={this.state.myPath} /> },
        Edit: { screen: () => <Edit myPath={this.state.myPath} /> }
    }, {
            defaultNavigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ tintColor }) => {
                    const { routeName } = navigation.state;
                    let IconComponent = Ionicons;
                    let iconName;
                    if (routeName === 'Descriptif') {
                        iconName = 'md-fitness';
                    } else if (routeName === 'Chrono') {
                        iconName = 'md-time';
                    } else if (routeName === 'Session') {
                        iconName = 'md-save';
                    } else if (routeName === 'Resultats') {
                        iconName = 'md-analytics';
                    } else if (routeName === 'Edit') {
                        iconName = 'md-cut';
                    }
                    return <IconComponent name={iconName} size={25} color={tintColor} />;
                },
            }),
            tabBarOptions: {
                activeTintColor: 'red',
                inactiveTintColor: 'gray',
            },
        })

class Resultats extends Component {
    constructor() {
        super()
        this.state = {
            loading: true,
            results: null
        }
    }

    focusSubscription = null;

    onWillFocus = payload => {
        console.log('didBlur', payload);
        this.readData(); // my method 
    };

    componentDidMount = () => {
        this.focusSubscription = this.props.navigation.addListener(
            'willFocus',
            this.onWillFocus
        );
    };

    componentWillUnmount = () => {
        this.focusSubscription && this.focusSubscription.remove();
        this.focusSubscription = null;
    };
}

Answer 1

Использование NavigationEvents .Добавьте прослушиватели событий в ваш компонент данных списка.

onWillFocus - прослушиватель событий

onDidFocus - прослушиватель событий

onWillBlur - прослушиватель событий

onDidBlur -прослушиватель событий

, например, при фокусировке экрана данных списка будет запущено следующее:

class App extends Component {

  focusSubscription = null;

  onWillFocus = payload => {
   // call a function to reload data here
  };

componentDidMount = () => {
  this.focusSubscription = this.props.navigation.addListener(
    'willFocus',
    this.onWillFocus
  );
};

componentWillUnmount = () => {
  this.focusSubscription && this.focusSubscription.remove();
  this.focusSubscription = null;
};

Передайте навигацию к вашему компоненту, например

Resultats: { screen: ({ navigation }) => <Resultats navigation={navigation} myPath={this.state.myPath} /> },

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

import {
   ...
   NavigationEvents,
 } from 'react-navigation';

class Resultats extends Component {
 ...
onWillFocus = payload => {
    console.log('didBlur', payload);
    this.readData(); // my method 
};

....
  render() {
    ...
    return (
      <View>
        <NavigationEvents
          onDidFocus={payload => this.onWillFocus(payload)}
        />
        {/* 
         Your view code
        */}
      </View>
    )
  }