在 react native 中使用 goBack() 需要帮助

Question

我在使用堆栈导航器中的后退按钮时遇到问题。我收到一条错误消息，提示 undefined 不是对象（正在评估 '_this.props'）。如果它有效，它会返回到底部堆栈导航器中的不同选项卡。就像如果我点击预约会议然后我回到家然后点击返回，无论如何都会让我预约会议。请帮忙。

这是我目前所拥有的：

function HomeScreen({ navigation }) {
      
        return (
          <WebView
            source={{
              uri: 'https://www.stoodnt.com/'
            }}
            style={{ marginTop: -120 }}
          />
        );
         
}

const HomeStack = createStackNavigator();
function HomeStackScreen() {
 return (
   <HomeStack.Navigator>
    <HomeStack.Screen name="Home"
         component={HomeScreen}
         options={{
         headerLeft: () => (
           <HeaderBackButton
            onPress={() => this.props.navigation.goBack(null)}
            
           />
        ),
    }}
/>
   </HomeStack.Navigator>
  );
}

底部导航器：

const Tab = createBottomTabNavigator();

export default function App() {

    return (
       <NavigationContainer>
         <Tab.Navigator
           screenOptions={({ route }) => ({
             tabBarIcon: ({ focused, color, size }) => {
               let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-home'
                : 'ios-home';
            } else if (route.name === 'Book Session')  {
                iconName = focused ? 'ios-calendar' : 'ios-calendar';
            }
            else if (route.name === 'Blogs')  {
                iconName = focused ? 'ios-bookmark' : 'ios-bookmark';
            }
            else if (route.name === 'Online Courses') {
              iconName = focused ? 'ios-book' : 'ios-book';
            }
            else if (route.name === 'Classes') {
              iconName = focused ? 'ios-desktop' : 'ios-desktop';
            }

            return <Ionicons name={iconName} size={40} color={'orange'} />;

          },
        })}
            tabBarOptions={{
              activeTintColor: '#000000',
              inactiveTintColor: '#616161',
              labelStyle: {
                fontSize: 10,
              },
              style: {
                backgroundColor: '#F7F7F7',
              },
    }}

      >


            
          <Tab.Screen name="Home" component={HomeStackScreen} />
          <Tab.Screen name="Book Session" component={BookStackScreen} />
          <Tab.Screen name="Blogs" component={BlogStackScreen} />
          <Tab.Screen name="Online Courses" component={OnlineStackScreen} />
            <Tab.Screen name="Classes" component={ClassesStackScreen} />
        
        
            
        </Tab.Navigator>
    </NavigationContainer>
        
            
            


  );

}

Answer 1

在功能组件中，您无权访问“this”。您应该从屏幕选项传递导航或使用 useNavigation。

<HomeStack.Screen
   ...
   options={({navigation}) => (
      headerLeft: () => (
      // you can use navigation.goBack() here
      )
)}

或

    // this should be added right under function HomeStackScreen, 
    // right above the return and you will be able to use it in the screens
    const navigation = useNavigation()

Answer 2

试试下面的代码：

function HomeScreen(props) {
      
        return (
          <WebView
            source={{
              uri: 'https://www.stoodnt.com/'
            }}
            style={{ marginTop: -120 }}
          />
        );
         
}

const HomeStack = createStackNavigator();
function HomeStackScreen() {
 return (
   <HomeStack.Navigator>
    <HomeStack.Screen name="Home"
         component={HomeScreen}
        options={({ route, navigation }) => ({
         headerLeft: () => (
           <HeaderBackButton
            onPress={() => navigation.goBack(null)}
           />
        ),        
      })}

/>
   </HomeStack.Navigator>
  );
}```