在本机反应中使用 createMaterialTopTabNavigator 时无法导航到另一个页面
can't navigate to another page when using createMaterialTopTabNavigator in react native
我使用 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;
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>
)
}
您也可以尝试 app.js
import { NavigationContainer } from '@react-navigation/native';
const App=()=>{
return(
<NavigationContainer independent={true} >
<AppContainer />
</NavigationContainer>
)
}
export default App;
我使用 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;
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>
)
}
您也可以尝试 app.js
import { NavigationContainer } from '@react-navigation/native';
const App=()=>{
return(
<NavigationContainer independent={true} >
<AppContainer />
</NavigationContainer>
)
}
export default App;