Переназначение разных вкладок в React Native

Question

Я работаю над созданием приложения React Native с несколькими вкладками. Каждая вкладка отображает данные, полученные из вызова API:

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  TabBarIOS,
  Text,
  View,
  NavigatorIOS,
} = React;

// Load up tab pages
var Home = require('./Home');
var Appointments = require('./Appointments');
var Clients = require('./Clients');
var EmailMarketing = require('./EmailMarketing');
var Analytics = require('./Analytics');
var AddClient = require('./AddClient');

var Icon = require('react-native-vector-icons/Ionicons');

var TabBar = React.createClass({
  getInitialState() {
    return {
      selectedTab: 'home',
    };
  },
  render() {

      return (
        <TabBarIOS ref="tabBar" selectedTab={this.state.selectedTab}>
          <Icon.TabBarItem
            title="Home"
            selected={this.state.selectedTab === 'home'}
            iconName="ios-home-outline"
            selectedIconName="ios-home"
            onPress={() => {
              if (this.state.selectedTab !== 'home') {
                this.setState({
                  selectedTab: 'home'
                });
              } else if (this.state.selectedTab === 'home') {
                this.refs.homeRef.popToTop();
              }


            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='homeRef'
              initialRoute={{
                title: 'Home',
                component: Home
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Appointments"
            selected={this.state.selectedTab === 'appointments'}
            iconName="ios-calendar-outline"
            selectedIconName="ios-calendar"
            onPress={() => {
              if (this.state.selectedTab !== 'appointments') {
                this.setState({
                  selectedTab: 'appointments'
                });
              } else if (this.state.selectedTab === 'appointments') {
                this.refs.appointmentsRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='appointmentsRef'
              initialRoute={{
                title: 'Appointments',
                component: Appointments
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Clients"
            selected={this.state.selectedTab === 'clients'}
            iconName="ios-people-outline"
            selectedIconName="ios-people"
            onPress={() => {
              if (this.state.selectedTab !== 'clients') {
                this.setState({
                  selectedTab: 'clients'
                });
              } else if (this.state.selectedTab === 'clients') {
                this.refs.clientsRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='clientsRef'
              initialRoute={{
                rightButtonTitle: 'Add Client',
                onRightButtonPress: () => {
                  this.refs.clientsRef.navigator.push({
                    title: "Add Client",
                    component: AddClient
                  });
                },
                title: 'My Clients',
                component: Clients
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Email Marketing"
            selected={this.state.selectedTab === 'emailMarketing'}
            iconName="ios-email-outline"
            selectedIconName="ios-email"
            onPress={() => {
              if (this.state.selectedTab !== 'emailMarketing') {
                this.setState({
                  selectedTab: 'emailMarketing'
                });
              } else if (this.state.selectedTab === 'emailMarketing') {
                this.refs.emailMarketingRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='emailMarketingRef'
              initialRoute={{
                title: 'Email Marketer',
                component: EmailMarketing
              }} />
          </Icon.TabBarItem>

          <Icon.TabBarItem
            title="Analytics"
            selected={this.state.selectedTab === 'analytics'}
            iconName="ios-pie-outline"
            selectedIconName="ios-pie"
            onPress={() => {
              if (this.state.selectedTab !== 'analytics') {
                this.setState({
                  selectedTab: 'analytics'
                });
              } else if (this.state.selectedTab === 'analytics') {
                this.refs.analyticsRef.popToTop();
              }
            }}
            >
            <NavigatorIOS
              style={styles.container}
              ref='analyticsRef'
              initialRoute={{
                title: 'Analytics',
                component: Analytics
              }} />
          </Icon.TabBarItem>
        </TabBarIOS>
      );
    },
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#123456',
  },
})



module.exports = TabBar;

Проблема, с которой я столкнулся, заключается в том, что если пользователь решил изменить или изменить данные на одной вкладке (например, если он добавил "клиента" в свой список клиентов), он должен увидеть это изменение на другой вкладке как результат вызова API (например, в индексе клиентов). Что я обнаружил, так это то, что переключение назад и вперед между различными вкладками, по-видимому, не вызывает повторное отображение состояния и, следовательно, повторный вызов API - в результате он просто показывает устаревшие данные из последнего вызова API. Каков наилучший способ справиться с этим?

Answer 1

Вам нужно какое-то общее состояние между вашими компонентами. Попробуйте приставку или другую реализацию потока.