困っていること
BottomTab.Screen
のname
をtypes.tx
で宣言したTabOne
とTabTwo
以外にするとエラーになってしまいます。(TabOne
を「ホーム」にしたりするとtype errorになってしまいます。)
js
で開発する分には型を気にしなくていいのですが、ts
を勉強で使って開発すると型付けについては基本的な書き方しか分からないためこうした場合にどのようにしたら良いのか分からず困っています。
typescript
1// navigation/BottomTabNavigator.tsx 2const BottomTab = createBottomTabNavigator<BottomTabParamList>(); 3 4export default function BottomTabNavigator() { 5 const colorScheme = useColorScheme(); 6 7 return ( 8 <BottomTab.Navigator 9 initialRouteName="TabOne" 10 tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}> 11 <BottomTab.Screen 12 name="TabOne" // ホーム 13 component={TabOneNavigator} 14 options={{ 15 tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />, 16 }} 17 /> 18 <BottomTab.Screen 19 name="TabTwo"// タスク 20 component={TabTwoNavigator} 21 options={{ 22 tabBarIcon: ({ color }) => <TabBarIcon name="task" color={color} />, 23 }} 24 /> 25 26 </BottomTab.Navigator> 27 ); 28}
typescript
1// types.tx 2export type BottomTabParamList = { 3 TabOne: undefined; 4 TabTwo: undefined; 5};
エラーの解消方法についてご教示頂きたいです。(name="test")
あなたの回答
tips
プレビュー