在 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>;