在基于动态标签导航器的每个屏幕中使用不同状态

Question

我正在制作一个购物应用程序，因为我使用的是动态制表符导航器，因此我想根据可以创建许多对象的子对象显示屏幕，所以我必须这样做，但是我遇到了一个问题我想知道如何在tabnavigator中的动态屏幕上使用不同的状态，因为我正在为此使用动态屏幕，因此我想为每个屏幕设置状态并在其中呈现不同的视图。 以及如何获取客户数据对我有帮助...

我的数据数组

this.state = {
  subscriptions: [
    {
      id: 1,
      companyName: 'Company 1',
      customers: [{ name: xyz }]
    },
    {
      id: 2,
      companyName: 'Company 2',
      customers: [{ name: xyz }]
    },
    {
      id: 3,
      companyName: 'Company 3',
      customers: [{ name: xyz }]
    },
    {
      id: 4,
      companyName: 'Company 4',
      customers: [{ name: xyz }]
    }
  ],
  dataSource: []
};


render() {
  const screens = {}
  const { navigation } = this.props
  const { subscriptions } = this.state
  let selectedSubscription = navigation.getParam('subscription')

  subscriptions.forEach((subscription) => {
    if (selectedSubscription === undefined) {
      selectedSubscription = subscription
    }
    
    // For each company's category, create a new tab screen with that category's companies

    screens[subscription.companyName] = {
      screen: () => (
        <CustomersTab
          subscription={subscription}
          topNavigation={navigation}
            customers={subscription.customers}
        />
      ),
    }
  })
}

TAB配置

const TabNavigation = createMaterialTopTabNavigator(screens, {
  initialRouteName: selectedSubscription.companyName,
  headerMode: 'none',
  tabBarOptions: {
    labelStyle: {
      fontSize: 12,
      fontWeight: 'bold',
    },
  }
})

return (
  <View style={{ flex: 1 }}>
    { subscriptions.length > 1 && ( <TabNavigation />)}
    { subscriptions.length === 1 && (
        <CustomersTab
          subscription={subscriptions[0]}
          customers={subscriptions[0].customers}
        />
      )
    }
  </View>
)

TAB可以根据数组本身进行渲染

class CustomersTab extends React.Component {
  render() {
    const { topNavigation, customers, subscription } = this.props
    return (
      <View style={{ flex: 1 }}>
        <Text>List of Customers Here</Text>
      </View>
    )
  }
}