React Native Expo：如何将「Bottom Tab.Screen」名称类型别名更改为日文？

Question

背景 我第一次尝试使用 typescript 进行 React Native Expo。 所以，我不知道使用BottomTab.Screen。

问。我想把「name="TabOne"」 改成日语是「ホーム」。

// navigation/BottomTabNavigator.tsx
const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="TabOne"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
      <BottomTab.Screen
        name="TabOne" // ホーム
        component={TabOneNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
        }}
      />
      <BottomTab.Screen
        name="TabTwo"// タスク
        component={TabTwoNavigator}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="task" color={color} />,
        }}
      />

    </BottomTab.Navigator>
  );
}

// types.tx
export type BottomTabParamList = {
  TabOne: undefined;
  TabTwo: undefined;
};

※备忘 这个项目是带有 TypeSript 的 React Native Expo。

Answer 1

您需要使用title 或tabBarLabel 指定标题：

const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="TabOne"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
      <BottomTab.Screen
        name="TabOne"
        component={TabOneNavigator}
        options={{
          title: 'ホーム',
          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
        }}
      />
      <BottomTab.Screen
        name="TabTwo"
        component={TabTwoNavigator}
        options={{
          title: 'タスク',
          tabBarIcon: ({ color }) => <TabBarIcon name="task" color={color} />,
        }}
      />

    </BottomTab.Navigator>
  );
}

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarlabel