在 react native 中使用 createMaterialTopTabNavigator 时无法导航到另一个页面

Question

我正在使用 createMaterialTopTabNavigator 并且我有函数 (aa()) 里面有一个 touchableOpacity btn ，当按下它时无法转到另一个页面我不知道是什么问题，所以任何人都可以帮助我吗？ ，我也有路线的路线文件， 谢谢

// 这是 App.js：

 const App=()=>{
  return <AppContainer />;
}

export default App;

// 应用容器

 import { createAppContainer } from "react-navigation";
import React from "react";
import {
    View,
    Text,
    Image,
    StyleSheet,
    Alert,
    TouchableOpacity,
  } from "react-native";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import Header from "./Header";
import ListProch from "./ListProch";
import ListeEnCours from "./ListeEnCours";
import ListeTermines from "./ListeTermines";


function aa({ navigation }){
  return(
    <TouchableOpacity 
    onPressIn={()=>navigation.navigate("Buy")}
    style={{width:200,height:200,backgroundColor:"red"}}>

    </TouchableOpacity>

  )
}
const TopBarMenu= createMaterialTopTabNavigator(
  {
    Prochaines: {
      screen: aa
    },
    "En cours": {
      screen: ListeEnCours
    },
    Terminés: {
      screen: ListeTermines
    },
   
  },
  {
    tabBarComponent: Header,
    tabBarOptions: {
      
  
      activeTintColor: "#30A6CA",
      inactiveTintColor: "#333333",
      
      
    },
    initialRouteName: "Prochaines"
  }
  
);

const AppContainer = createAppContainer(TopBarMenu);
export default  (AppContainer)

// Routes.js

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Login from "../Components/Login";
import ForgetPassword from "../Components/ForgetPassword";
import Register from "../Components/Register";
import Terms from "../Components/Terms";
import Home from "../Components/Home";
import ListProch from "../Components/ListProch";
import TopBar from "../Components/TopBar";
import Encheres from "../Components/Encheres";
import Favoris from "../Components/Favoris";
import Profil from "../Components/Profil";
import UpdateInfo from "../Components/UpdateInfo";
import ChangePassword from "../Components/ChangePassword";
import InfoSecurity from "../Components/InfoSecurity";
import InfoLegales from "../Components/InfoLegales";
import Partenariat from "../Components/Partenariat";
import CommentMarche from "../Components/CommentMarche";
import Autres from "../Components/Autres";
import Notification from "../Components/Notification";
import Buy from "../Components/Buy";
import DetailsProduit from "../Components/DetailsProduit";
import EncheresEndirect from "../Components/EncheresEndirect";
import Header from "../Components/Header";
import AppContainer from "../Components/TopBarMenu";
import HomeScreen from "../Components/TopBarMenu";
import Tabs from "../Components/Tabs";
import Index from "../Components/Index";
import IndexAutres from "../Components/IndexAutres";
import IndexProch from "../Components/IndexProch";
const screens = {

  
  AppContainer: {
    screen: AppContainer,
    navigationOptions: {
      headerShown: null,
    },
  },
  
  Header: {
    screen: Header,
    navigationOptions: {
      headerShown: null,
    },
  },
  Buy: {
    screen: Buy,
    navigationOptions: {
      headerShown: null,
    },
  },
  
};

const RouteStack = createStackNavigator(screens);

const Routes = createAppContainer(RouteStack);

export default Routes;

Answer 1

import { useNavigation } from '@react-navigation/native'

function aa(){
  const navigation = useNavigation();
  return(
    <TouchableOpacity 
    onPressIn={()=>navigation.navigate("Buy")}
    style={{width:200,height:200,backgroundColor:"red"}}>

    </TouchableOpacity>

  )
}

Answer 2

您也可以在 app.js 中尝试

 import { NavigationContainer } from '@react-navigation/native';
 const App=()=>{
  return(
     <NavigationContainer independent={true} >
       <AppContainer />
     </NavigationContainer>
  ) 
}

export default App;