重复页面的React Native Typescript上的导航结构
我的app.tsx文件中有以下导航结构:重复页面的React Native Typescript上的导航结构,typescript,react-native,react-navigation,Typescript,React Native,React Navigation,我的app.tsx文件中有以下导航结构: const HomeStack = createStackNavigator<HomeStackParamList>() function HomeStackScreen() { return ( <HomeStack.Navigator> <HomeStack.Screen name='Home' component={NasaImageList}
const HomeStack = createStackNavigator<HomeStackParamList>()
function HomeStackScreen() {
return (
<HomeStack.Navigator>
<HomeStack.Screen
name='Home'
component={NasaImageList}
options={{ title: 'NASA Image Search' }}
/>
<HomeStack.Screen
name='Details'
component={NasaImageDetails}
options={({ route }) => ({ title: route.params.title })}
/>
</HomeStack.Navigator>
)
}
const FavouriteStack = createStackNavigator<FavouriteStackParamList>()
function FavouriteStackScreen() {
return (
<FavouriteStack.Navigator>
<FavouriteStack.Screen
name="Favourites"
component={NasaImageFavouriteList} />
<FavouriteStack.Screen
name="Details"
component={NasaImageDetails}
options={({ route }) => ({ title: route.params.title })}} />
</FavouriteStack.Navigator>
)
}
const Tab = createBottomTabNavigator()
export default class App extends Component {
render() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeStackScreen}
/>
<Tab.Screen
name="Favourites"
component={FavouriteStackScreen} />
</Tab.Navigator>
</NavigationContainer>
)
}
传递到my NasaImageDetails组件(构成屏幕组件“详细信息”)中的导航道具类型定义如下:
export type NasaImageDetailsHomeNavigationProp = StackNavigationProp<
HomeStackParamList,
'Details'
>
export type NasaImageDetailsFavouriteNavigationProp = StackNavigationProp<
FavouriteStackParamList,
'Details'
>
导出类型NasaImageDetailsHomeNavigationProp=StackNavigationProp<
本垒打名单,
“细节”
>
导出类型NasaImageDetailsFavouriteNavigationProp=StackNavigationProp<
收藏夹列表,
“细节”
>
我最终从两个参数列表中得到了两种导航道具类型,这并不理想。在react native typescript中,针对这种情况的最佳做法是什么?没有找到解决方法,因此只使用了:
export type NasaImageDetailsHomeNavigationProp = StackNavigationProp<
HomeStackParamList,
'Details'
> | StackNavigationProp<
FavouriteStackParamList,
'Details'
>
导出类型NasaImageDetailsHomeNavigationProp=StackNavigationProp<
本垒打名单,
“细节”
>| StackNavigationProp<
收藏夹列表,
“细节”
>
export type NasaImageDetailsHomeNavigationProp = StackNavigationProp<
HomeStackParamList,
'Details'
> | StackNavigationProp<
FavouriteStackParamList,
'Details'
>