我在使用 Tab Navigator Key 时遇到问题

Question

我在尝试呈现 TabBar 时遇到问题

”警告：列表中的每个 child 都应该有一个唯一的“键”道具。检查 MyTabBar 的渲染方法。有关详细信息，请参阅 https://reactjs.org/link/warning-keys。"

我的代码：

import React from "react";
import { Cores } from "../../Theme/";
import { View, TouchableOpacity, StyleSheet } from "react-native";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const Tab = createBottomTabNavigator();

import Pratique from "../../Screens/Pratique";
import Home from "../../Screens/Home";
import Perfil from "../../Screens/Perfil";

import HomeIcon from "../../Assets/Barra/Inicio.svg";
import PratiqueIcon from "../../Assets/Barra/Exercicios.svg";
import PerfilIcon from "../../Assets/Barra/Perfil.svg";

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={styles.container}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;
        var Icon;
        switch (route.name) {
          case "Home":
            Icon = HomeIcon;
            break;
          case "Perfil":
            Icon = PerfilIcon;
            break;
          case "Pratique":
            Icon = PratiqueIcon;
            break;

          default:
            Icon = HomeIcon;
            break;
        }

        const onPress = () => {
          const event = navigation.emit({
            type: "tabPress",
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: "tabLongPress",
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={styles.touchable}
          >
            <Icon
              style={{ color: isFocused ? Cores.azulNavegar : Cores.cinza }}
            />
            <View
              style={{
                position: "absolute",
                bottom: 0,
                height: 4,
                width: "100%",
                backgroundColor: isFocused ? Cores.azulNavegar : null,
              }}
            ></View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

export default function TabBar() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
        statusBarHidden: true,
      }}
      tabBar={(props) => <MyTabBar {...props} />}
    >
      <Tab.Screen name="Pratique" component={Pratique} />
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Perfil" component={Perfil} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    width: "100%",
    backgroundColor: Cores.branco,
  },

  touchable: {
    flex: 1,
    paddingVertical: 20,
    justifyContent: "center",
    alignItems: "center",
  },
});

Answer 1

每次你使用“map”或任何其他循环到return组件，你必须添加“key”属性来包装组件（顶部）

...
{state.routes.map((route, index) => {
...
return (
          <TouchableOpacity
            key={index.toString()}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={styles.touchable}
          >
...

当您有地图时，只需将其添加到您的 return 部分 :)

key={index.toString()}

我在使用 Tab Navigator Key 时遇到问题

I'm having problems with Tab Navigator Key

javascript

react-native

mobile

key

tabbar