在React-Native上将JS转换为TS

Question

我已经在Typescript上呆了很长时间了，似乎每个人都喜欢它，所以我接受我现在的沮丧是由于我缺乏对TS的了解，而不是TS本身。

可以有人更有经验看看我下面的代码，并告诉我为什么，如果我悬停在标签的名称。例如屏幕，它不显示类型"string"?同样的headershowed ?

非常感谢。谢谢你。

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 type定义了传递给屏幕的道具的类型。你可以从@react-navigation/bottom-tabs中导入BottomTapScreenProps，并像这样使用它:

type TabProps = BottomTabScreenProps<RootStackParamList>;