React Native 关键问题

Question

所以在我的 React 本机应用程序中，由于某些奇怪的原因，我的应用程序一直告诉我 Warning: Each child in a list should have a unique "key" prop 但为什么呢？
这是显示问题的代码：

const TabBarIcon = ({ onPress, options, iconName, isFocused }) => {
  return (
    <Pressable
      onPress={() => onPress()}
      testID={options.tabBarTestID}
      accessibilityRole="button"
      style={({ pressed }) => [
        styles.bottomTabNavigationButtonStyling,
        {
          backgroundColor: pressed ? 'rgba(255, 255, 255, 0.28)' : '#EA3345',
        },
      ]}>
      {isFocused ? (
        <Icon name={iconName} size={RFPercentage(5)} color="white" />
      ) : (
        <Icon name={iconName} size={RFPercentage(4)} color="white" />
      )}
    </Pressable>
  );
};

const MyTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.bottomTabNavigatorStyling}>
      {state.routes.map((route, index) => {
        const isFocused = state.index === index;
        const { options } = descriptors[route.key];

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });
          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <>
            /****************************************Problem Part
            {index === 0 && (
              <TabBarIcon
                key="home"
                onPress={() => onPress()}
                options={options}
                iconName="home"
                isFocused={isFocused}
              />
            )}
            {index === 1 && (
              <TabBarIcon
                key="tasks"
                onPress={() => onPress()}
                options={options}
                iconName="tasks"
                isFocused={isFocused}
              />
            )}
            {index === 2 && (
              <TabBarIcon
                key="statistics"
                onPress={() => onPress()}
                options={options}
                iconName="history"
                isFocused={isFocused}
              />
            )}
            /*******************************************
          </>
        );
      })}
    </View>
  );
};

请告诉我发生了什么事。如果我忘记提及某些事情，请告诉我。我已经对显示错误的部分进行了排序。它一直说列表中的每个 child 都应该有一个唯一的键，即使我的项目不在列表中？即使它们在列表中，键属性也完全不同，所以为什么会出现问题？

Answer 1

您必须将 key 属性放在顶部元素上。在您的情况下，您必须在 <React.Fragment> 上设置 key 道具，TabBarIcon 不是顶部元素。

例如你可以像下面那样做

return (
  <React.Fragment key={'route'+index}>
    /****************************************Problem Part
    {index === 0 && (
      <TabBarIcon
        onPress={() => onPress()}
        options={options}
        iconName="home"
        isFocused={isFocused}
      />
    )}
    {index === 1 && (
      <TabBarIcon
        onPress={() => onPress()}
        options={options}
        iconName="tasks"
        isFocused={isFocused}
      />
    )}
    {index === 2 && (
      <TabBarIcon
        onPress={() => onPress()}
        options={options}
        iconName="history"
        isFocused={isFocused}
      />
    )}
    /*******************************************
  </React.Fragment>
);

你也可以用 FlatList 做同样的事情 MyTabBar 组件应该是这样的

const MyTabBar = ({ state, descriptors, navigation }) => {
  const _renderItem = ({ route, index }) => {
    const isFocused = state.index === index;
    const { options } = descriptors[route.key];

    const onPress = () => {
      const event = navigation.emit({
        type: 'tabPress',
        target: route.key,
      });
      if (!isFocused && !event.defaultPrevented) {
        navigation.navigate(route.name);
      }
    };
    return (
      <TabBarIcon
        key="home"
        onPress={() => onPress()}
        options={options}
        iconName="home"
        isFocused={isFocused}
      />
    );
  };
  return (
    <View style={styles.bottomTabNavigatorStyling}>
      <FlatList
        data={state.routes}
        renderItem={_renderItem}
        keyExtractor={(item, index) => 'TabBarIcon' + index}
      />
    </View>
  );
};

React Native 关键问题

React Native Key Problems

key

react-native