在本機反應中使用goBack()需要幫助

我在使用堆疊導航器中的后退按鈕時遇到問題。我收到一條錯誤訊息，說 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>
        
            
            


  );

}

uj5u.com熱心網友回復：

試試下面的代碼：

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>
  );
}```

uj5u.com熱心網友回復：

在功能組件中，您無權訪問“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()

標籤：javascript 反应原生 网络视图 堆栈导航器

上一篇：帶有多個運算式的Javascriptswitchcase

下一篇：Python如何在不匯入的情況下呼叫類方法