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

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

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

pakage.json:

    "@react-navigation/bottom-tabs": "5.11.15",
    "@react-navigation/core": "5.16.1",
    "@react-navigation/drawer": "5.12.9",
    "@react-navigation/material-top-tabs": "5.3.19",
    "@react-navigation/native": "5.9.8",
    "@react-navigation/stack": "5.14.9",


const sharedHeaderOptions: StackNavigationOptions = {
  headerShown: true,
  headerTitleStyle,
  headerTitleAlign: 'left',
  headerTitleContainerStyle,
  headerLeftContainerStyle: headingStyles?.headerLeftContainerStyle,
  headerLeft: () => (
    <TouchableOpacity
      onPress={() => {
        console.log('go back');
        navigation.goBack();
      }}>
      <BackChevron />
    </TouchableOpacity>
  ),
  headerBackImage: () => {},
  headerBackTitleVisible: false,
  headerTintColor: colors.INACTIVE_THUMBCOLOR,
};

const FuelFinderStackScreen = () => (
  <FuelFinderStack.Navigator initialRouteName={AppRoutes.FuelFinderSearch.Name}>
    <FuelFinderStack.Screen
      name={AppRoutes.FuelFinderSearch.Name}
      component={SearchScreen}
      options={{
        ...sharedHeaderOptions,
        headerTitle: fuelFinderMappings.search.screenTitle,
      }}
    />
    <FuelFinderStack.Screen
      name={AppRoutes.FuelFinderSearchResults.Name}
      component={SearchResultListScreen}
      options={sharedHeaderOptions}
    />
  </FuelFinderStack.Navigator>
);

export default FuelFinderStackScreen;

pxy2qtax

pxy2qtax1#

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

const getSharedHeaderOptions: (navigation: {
        route: RouteProp<ParamList, RouteName>;
        navigation: any;
      }) => StackNavigationOptions = ({navigation}) => ({
  headerShown: true,
  headerTitleStyle,
  headerTitleAlign: 'left',
  headerTitleContainerStyle,
  headerLeftContainerStyle: headingStyles?.headerLeftContainerStyle,
  headerLeft: () => (
    <TouchableOpacity
      onPress={() => {
        console.log('go back');
        navigation.goBack(); //now this solve issue 1, you get the object from the param
      }}>
      <BackChevron />
    </TouchableOpacity>
  ),
  headerBackImage: () => {},
  headerBackTitleVisible: false,
  headerTintColor: colors.INACTIVE_THUMBCOLOR,
});

const FuelFinderStackScreen = () => (
  <FuelFinderStack.Navigator initialRouteName={AppRoutes.FuelFinderSearch.Name}>
    <FuelFinderStack.Screen
      name={AppRoutes.FuelFinderSearch.Name}
      component={SearchScreen}
      options={getSharedHeaderOptions}
    />
    <FuelFinderStack.Screen
      name={AppRoutes.FuelFinderSearchResults.Name}
      component={SearchResultListScreen}
      options={getSharedHeaderOptions}
    />
  </FuelFinderStack.Navigator>
);

export default FuelFinderStackScreen;

考虑到options具有以下类型:

options?: ScreenOptions
    | ((props: {
        route: RouteProp<ParamList, RouteName>;
        navigation: any;
      }) => ScreenOptions);

相关问题