重新渲染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

您需要組件之間的某種共享狀態。嘗試redux或其他一些通量實現。