在 React-Native 上將 JS 轉換為 TS

Question

我一直堅持 Typescript 這么久，似乎每個人都喜歡它所以我接受我現在的沮喪是因為我缺乏對 TS 的了解而不是 TS 本身。

更有經驗的人可以看看我的以下代碼並告訴我為什么如果我 hover 在 Tab.Screen 中的名稱，例如，它不顯示類型“字符串”？ headerShown 也一樣嗎？

將不勝感激。 謝謝你。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import SavedScreen from '../screens/SavedScreen';
import SettingsScreen from '../screens/SettingsScreen';
import CameraScreen from '../screens/CameraScreen';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
const savedIcon = require('../assets/saved.png') as HTMLImageElement;
const settingsIcon = require('../assets/settings.png') as HTMLImageElement;
const cameraIcon = require('../assets/camera_icon.png') as HTMLImageElement;
import COLORS from '../theme.js';

type RootStackParamList = {
  Saved: {
    name: string;
    options: {
      headerShown: string;
    }
  };
  Camera: {
    name: string;
  };
  Settings: {
    name: string;
  };
};

const Tab = createBottomTabNavigator<RootStackParamList>();

const Tabs: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: styles.navigatorStyle,
      }}
    >
      <Tab.Screen
        name="Saved"
        component={SavedScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Image
                source={savedIcon}
                resizeMode="contain"
                style={{
                  width: 25,
                  height: 25,
                  tintColor: focused ? COLORS.focused : COLORS.unfocused,
                }}
              />
              <Text
                style={{
                  color: focused ? COLORS.focused : COLORS.unfocused,
                  fontSize: 12,
                }}
              >
                Saved
              </Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Camera"
        component={CameraScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Image
                source={cameraIcon}
                resizeMode="contain"
                style={{
                  width: 30,
                  height: 30,
                  tintColor: focused ? COLORS.focused : COLORS.unfocused,
                }}
              />
              <Text
                style={{
                  color: focused ? COLORS.focused : COLORS.unfocused,
                  fontSize: 12,
                }}
              >
                Camera
              </Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Image
                source={settingsIcon}
                resizeMode="contain"
                style={{
                  width: 25,
                  height: 25,
                  tintColor: focused ? COLORS.focused : COLORS.unfocused,
                }}
              />
              <Text
                style={{
                  color: focused ? COLORS.focused : COLORS.unfocused,
                  fontSize: 12,
                }}
              >
                Settings
              </Text>
            </View>
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  navigatorStyle: {
    position: 'absolute',
    bottom: 25,
    left: 20,
    right: 20,
    elevation: 0,
    backgroundColor: 'white',
    borderRadius: 15,
    height: 90,

    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
  },
});

export default Tabs;
```

Answer 1

RootStackParamList 類型定義了傳遞給屏幕的道具的類型。 您可以從 @react-navigation/bottom-tabs 導入 BottomTapScreenProps 並像這樣使用它，我認為：

type TabProps = BottomTabScreenProps<RootStackParamList>;