react native，react-navigation，TabNavigator，當我更改選項卡屏幕時如何發送請求

Question

我正在使用react-navigation來控制react-native App。

const MainTab = TabNavigator({
  Home: tabscreen(HomeScreen, '/home', 'home', 'home'),
  Chat: tabscreen(ChatScreen, '/chat', 'chat', 'chat'),
  Find: tabscreen(FindScreen, '/find', 'find', 'find'),
  Profile: tabscreen(ProfileScreen, '/profile', 'profile', 'profile')
}, {
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazy: true,
  //...other configs
  tabBarOptions: {
    // tint color is passed to text and icons (if enabled) on the tab bar
    activeTintColor: '#1BBC9B',
    inactiveTintColor: '#9B9B9B',
    showIcon: true,
    style: {
      backgroundColor: '#F4F4F4',
      borderTopWidth: 0,
      height: 49
    },
    labelStyle: {
      marginTop: 0,
      marginLeft: 0,
      marginRight: 0,
      marginBottom: 1.5
    }
  }
});



   const AppNavigator = StackNavigator({
  Main: {
    screen: MainTab ,
    path: '/',
    navigationOptions: {
      // header: null,
      headerVisible: false,
      gesturesEnabled: false,
    }
  },

  ....

    {
  initialRouteName: 'Main',
  mode: 'card',
  headerMode: 'screen',
  navigationOptions: {
      headerVisible: false,
      gesturesEnabled: true,
      headerStyle: styles.headerStyle,
      headerTitleStyle: styles.headerTitleStyle,
      headerTintColor: 'white',
      headerBackTitle: null,
  }
});

在“ Chat選項卡中，我向后端發送請求，以在ChatScreen的componentDidMount函數中獲取列表數據。 它運作良好。 當我從ChatScreen導航到另一個屏幕時，執行一些操作，然后單擊另一個屏幕左上角的“后退”按鈕返回到ChatScreen 。我需要再次從后端請求列表數據，但是componentDidMount沒有再次執行。

如果ChatScreen導航到另一個名為“ A”的屏幕。 “ A”屏幕導航返回到ChatScreen 。 我發現ChatScreen在這種情況下不執行componentDidMount函數。

我需要在將屏幕更改為ChatScreen時請求列表數據。 我是否必須在另一個react lifecycle function發送請求

還有一件事，我正在使用redux來控制狀態。

Answer 1

目前尚不支持，您可以按照問題＃51進行操作。

它在v1穩定版的路線圖中＃723

至於解決方法，您可以使用使用高階組件的pmachawoski來知道選項卡是否聚焦，但是問題是它始終執行，不像一次執行的componentDidMount那樣。

Answer 2

您應該使用onNavigationStateChange

此處的鏈接示例： https : //www.reddit.com/r/reactnative/comments/69xm4p/react_navigation_tab_change_event/