React导航,尝试返回时无法找到导航

zbdgwd5y  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(104)

我试图添加一个功能到headerLeft,但我找不到导航在我的 prop 。如何返回headerLeft组件?

  1. pakage.json:
  2. "@react-navigation/bottom-tabs": "5.11.15",
  3. "@react-navigation/core": "5.16.1",
  4. "@react-navigation/drawer": "5.12.9",
  5. "@react-navigation/material-top-tabs": "5.3.19",
  6. "@react-navigation/native": "5.9.8",
  7. "@react-navigation/stack": "5.14.9",
  8. const sharedHeaderOptions: StackNavigationOptions = {
  9. headerShown: true,
  10. headerTitleStyle,
  11. headerTitleAlign: 'left',
  12. headerTitleContainerStyle,
  13. headerLeftContainerStyle: headingStyles?.headerLeftContainerStyle,
  14. headerLeft: () => (
  15. <TouchableOpacity
  16. onPress={() => {
  17. console.log('go back');
  18. navigation.goBack();
  19. }}>
  20. <BackChevron />
  21. </TouchableOpacity>
  22. ),
  23. headerBackImage: () => {},
  24. headerBackTitleVisible: false,
  25. headerTintColor: colors.INACTIVE_THUMBCOLOR,
  26. };
  27. const FuelFinderStackScreen = () => (
  28. <FuelFinderStack.Navigator initialRouteName={AppRoutes.FuelFinderSearch.Name}>
  29. <FuelFinderStack.Screen
  30. name={AppRoutes.FuelFinderSearch.Name}
  31. component={SearchScreen}
  32. options={{
  33. ...sharedHeaderOptions,
  34. headerTitle: fuelFinderMappings.search.screenTitle,
  35. }}
  36. />
  37. <FuelFinderStack.Screen
  38. name={AppRoutes.FuelFinderSearchResults.Name}
  39. component={SearchResultListScreen}
  40. options={sharedHeaderOptions}
  41. />
  42. </FuelFinderStack.Navigator>
  43. );
  44. export default FuelFinderStackScreen;

pxy2qtax

pxy2qtax1#

第一个问题是您期望导航对象来自哪里?我假设你正在使用react-navigation v6,所以这可能会解决这个问题:
1.将sharedHeaderOptions更改为接收导航对象或堆栈属性的函数。
1.来自堆栈屏幕的参数option可以通过使用参数暴露对象navigation。所以你可以把它改成:

  1. const getSharedHeaderOptions: (navigation: {
  2. route: RouteProp<ParamList, RouteName>;
  3. navigation: any;
  4. }) => StackNavigationOptions = ({navigation}) => ({
  5. headerShown: true,
  6. headerTitleStyle,
  7. headerTitleAlign: 'left',
  8. headerTitleContainerStyle,
  9. headerLeftContainerStyle: headingStyles?.headerLeftContainerStyle,
  10. headerLeft: () => (
  11. <TouchableOpacity
  12. onPress={() => {
  13. console.log('go back');
  14. navigation.goBack(); //now this solve issue 1, you get the object from the param
  15. }}>
  16. <BackChevron />
  17. </TouchableOpacity>
  18. ),
  19. headerBackImage: () => {},
  20. headerBackTitleVisible: false,
  21. headerTintColor: colors.INACTIVE_THUMBCOLOR,
  22. });
  23. const FuelFinderStackScreen = () => (
  24. <FuelFinderStack.Navigator initialRouteName={AppRoutes.FuelFinderSearch.Name}>
  25. <FuelFinderStack.Screen
  26. name={AppRoutes.FuelFinderSearch.Name}
  27. component={SearchScreen}
  28. options={getSharedHeaderOptions}
  29. />
  30. <FuelFinderStack.Screen
  31. name={AppRoutes.FuelFinderSearchResults.Name}
  32. component={SearchResultListScreen}
  33. options={getSharedHeaderOptions}
  34. />
  35. </FuelFinderStack.Navigator>
  36. );
  37. export default FuelFinderStackScreen;

考虑到options具有以下类型:

  1. options?: ScreenOptions
  2. | ((props: {
  3. route: RouteProp<ParamList, RouteName>;
  4. navigation: any;
  5. }) => ScreenOptions);
展开查看全部

相关问题