我正在使用TypeScript创建Expo托管的React Native应用程序,但React Navigation和TypeScript出现了一些问题。
我想在Tab.Screen组件上指定底部选项卡导航器的图标。
这段代码可以工作,但会抱怨,因为route.params可能未定义(第10行)。
- 类型'object'上不存在属性'icon'*
我可以在initialParams上设置所需的图标属性吗?
我看了文档,但没有任何结果。
const App: React.FC<{}> = () => {
return (
<SafeAreaView style={styles.container}>
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ size, color }) => (
<MaterialIcons
size={size}
/* ===> */ name={route.params.icon}
color={color}
/>
),
})}
>
<Tab.Screen
name="EventListView"
initialParams={{ icon: 'view-agenda' }}
component={EventListScreen}
/>
<Tab.Screen
name="CreateEvent"
initialParams={{ icon: 'public' }}
component={SettingsScreen}
/>
</Tab.Navigator>
</NavigationContainer>
</SafeAreaView>
)
}
4条答案
按热度按时间lf5gs5x21#
import { RouteProp } from '@react-navigation/native';
我最近也遇到了同样的问题,我想出了这个,它似乎工作得很好。
qqrboqgw2#
正确的做法是用params定义一个类型,并在创建导航器时将其作为类型参数发送。
*
我假设您的Tab组件是一个BottomTabNavigator,但是无论您使用哪种create{whatever}Navigator
,都可以使用相同的代码。就像你的
Tab.Navigator
和Tab.Screen
将有正确的类型为他们的route
属性。文档中有更多的信息,以及更高级的情况,如注解钩子和嵌套导航器。
qmelpv7a3#
我认为您可以使用以下语法:
否则,请使用:
根据文档,此语法可防止在某些情况下未定义参数,并在params.someParam未定义或为空时提供默认值。
有关详细信息,请阅读此处:https://reactnavigation.org/docs/upgrading-from-4.x/#no-more-getparam。
7gs2gvoe4#
现在在官方文件中解释得很好,效果很好。
阅读文档:https://reactnavigation.org/docs/typescript/#type-checking-the-navigator
下面快速浏览一下它可能的样子:
然后对组件进行类型检查: