具有键属性的本机导航选项卡栏组件

Question

我正在将native-base库的页脚标签组件与react-navigation组件的标签导航器一起使用。

我遇到一个问题，当用户单击同一标签两次或三次时-它将相应的视图加载3-4次，这是糟糕的用户体验。

export default (tabNav = TabNavigator(
{
Home: { screen: Home },
People: { screen: People },
Links: { screen: Links },
 },
{
tabBarPosition: "bottom",
swipeEnabled: false,
tabBarComponent: props => {

  return (
    <StyleProvider style={getTheme(platform)}>
      <Footer>
        <FooterTab style={styles.color} >
          <Button 
            vertical
            active={props.navigationState.index === 0}
            onPress={() => props.navigation.navigate({routeName: 'Home', key: 'Home'})}
          >
            <Icon style={{color:'white'}} name="home" />
            <Text style={{color:'white', fontSize: 12}}>Home</Text>
          </Button>
          <Button 
            vertical
            active={props.navigationState.index === 1}
            onPress={() => props.navigation.navigate({routeName: 'People', key: 'People'})}
          >
            <Icon style={{color:'white'}} name="person" />
            <Text style={{color:'white', fontSize: 12}}>People</Text>
          </Button>
          <Button
            vertical
            active={props.navigationState.index === 2}
            onPress={() => props.navigation.navigate({routeName: 'Links', key: 'Links'})}
          >
            <Icon style={{color:'white'}} name="link" />
            <Text style={{color:'white', fontSize: 12}}>Links</Text>
          </Button>
        </FooterTab>
      </Footer>
    </StyleProvider>
  );
 }
}

我可以通过按以下建议在props.navigation.navigate中添加键属性来解决此问题：https://github.com/react-navigation/react-navigation/issues/271，但这会减慢模拟器中的导航速度。任何想法为什么会发生这种情况？

本质上，我将props.navigation.navigate('Home)更改为props.navigation.navigate({routeName: 'Home', key: 'Home'})，但是模拟器开始发出超时错误。