我是react native世界的新手，所以我需要有人幫助我構建導航頁面。我希望我的應用程式有像instagram一樣的結構--也就是主頁面應該是createBottomTabNavigator從那里我有幾個不同的頁面，并且我可以在它們之間輕松切換。以下是我的代碼：
export default const MyTabs = ({ currentUser, navigation }) => {
回傳 (
<Tab.Navigator initialRouteName="Home">
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
名稱="網路"
component={NetworkScreen} /> Tab.Screen name="網路
/>
<Tab.Screen
名稱="個人資料"
組件={組態檔螢屏}
options={{
tabBarIcon: ({ color, size }) => (
<Entypo name="地圖" color={color} size={26}. />
),
}}
/>
</Tab.Navigator>
);
};
然后在我的App.js檔案中我這樣呼叫它：
return (
<提供者 store={store}>
<NavigationContainer>
<MyTabs />
</NavigationContainer>
</Provider>
);
上述代碼作業正常。問題是當我想執行更復雜的導航時。例如，在我的主頁上，我有一個物件的串列，一旦我點擊這些物件，我想導航到一個新的頁面--用Stack導航器。我如何做到這一點，我應該在哪里定義這個頁面？我是在我的Home頁面中定義它，還是在我的App.js頁面中定義它？在我看來，它應該是這樣的：
<Stack.Screen
name="Details"
component={DetailScreen}
/>
我試著把它放在App.js里面，像這樣：
<提供者 store={store}>
<NavigationContainer>
<MyTabs />
<Stack.Navigator>
<Stack.Screen
name="見面會詳情"
component={MeetupDetails}。
options={{
headerTitle: "見面會詳情"。
}}
/>
</Stack.Navigator>
</NavigationContainer>
</Provider>。
但是它沒有作業。
另外，我還有一個問題--在我的底層標簽中，我可以導航到我的資料螢屏，而且運行良好。但我也想查看其他檔案。所以我的底部標簽是為我自己的資料保留的，但我如何定義另一個Profile螢屏，它可以進入其他用戶的資料？它需要和堆疊導航器一起嗎？它是否又需要在App.js中定義？ 在同一個頁面（Profile）定義兩個不同的導航器（底部標簽和堆疊）可以嗎？
uj5u.com熱心網友回復：
通常，當你有一個底部標簽導航器時，每個標簽將是一個StackNavigator
export default const MyTabs = （{ currentUser, navigation }）=> {
return (
<Tab.Navigator initialRouteName="Home">/span>
<Tab.Screen>
name="Home" // here 這個 將 是 BottomTabRoutes。 首頁
component={HomeNavigator}。
/>
<Tab.Screen>
name="Network" // here 這個 將 是 BottomTabRoutes。 NETWORK
component={NetworkNavigator}。
/>
<Tab.Screen>
name="Profile" // here 這個 將 是 BottomTabRoutes。 專業人士
component={ProfileNavigator}。
options={{}。
tabBarIcon: ({ color, size }) => (
< Entypo name="map"/span> color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};然后您的MeetupDetails螢屏將包含在HomeNavigator內，該螢屏是一個StackNavigator
export const HomeNavigator = () => {
return (
<Stack.Navigator[/span
screenOptions={{}。
...。
}}>
<Stack.Screen。
name={HomeRoutes.HOME}。
component={Home}
options={{}
headerStyle: styles.header,
title: 'Home'
}}
/>
<Stack.Screen
name={HomeRoutes.MEETUP_DETAILS}
component={MeetupDetails}>
options={{}>
headerStyle: styles.header,
title: 'Meetup Details'
}}
/>
</Stack.Navigator>/span>
}另外，我建議將你的路由名稱存盤在一個列舉中，這樣會更容易，他們可能的路由道具也會在一個tpye中。 像這樣：
。export enum BottomTabRoutes {
HOME = 'Home'/span>,
NETWORK = 'Network',
PROFILE = 'Profile',
}
export type BottomTabRouteProps = {
[BottomTabRoutes.HOME] 。{title: string}; //this is another parameter example.
[BottomTabRoutes.PROFILE] 。undefined;
[BottomTabRoutes.NETWORK] 。undefined;
};每個堆疊導航器的情況也是如此：
。export enum HomeRoutes = {
HOME = 'Home'/span>,
MEETUP_DETAILS = 'Meetup Details',
}
export type HomeRouteProps = {
[HomeRoutes.HOME] 。undefined。
[HomeRoutes.MEETUP_DETAILS: { someParamName: SomeType } //這可能是一個你將通過導航發送的引數。
}
//因此，你的MeetupDetails螢屏將看起來像這樣。
export const MeetupDetails = (props。StackScreenProps<HomeRouteProps, HomeRouteProps.MEETUP_DETAILS>,) => {
const navigationParam = props.route.params.someParamName。
return (
<View>/span>
...
</View>
)
}編輯
關于個人資料螢屏，我相信你可以有這樣的東西：
。export const MainNavigator = () => {
return (
<Stack. Navigator screenOptions={{headerShown: false}}>/span>
<Stack.Screen name={MainNavigatorRoutes. HOME} component={HomeNavigator} <>
<Stack.Screen name={MainNavigatorRoutes. USER} component={UserNavigator} <>
</Stack.Navigator>/span>
);
};
export const UserNavigator = （）=> {
return (
<Stack.Navigator[/span
screenOptions={({navigation}) =>({
...）}>。
<Stack.Screen。
name={UserNavigatorRoutes.SOME_OTHER_SCREEN}
component={UserSettings}。
/>
<Stack.Screen>
name={UserNavigatorRoutes.USER_PROFILE}
component={UserProfile}。
/>
</Stack.Navigator>/span>
);
};
export const HomeNavigator = () => {
return (
<Stack.Navigator screenOptions={{title:/span> ''}} >
<Stack.Screen
name={HomeNavigatorRoutes.HOME_TABS}。
component={HomeTabNavigator}。
options={{}。
headerShown: false,
}}
/>
</Stack.Navigator>/span>
);
};
export const HomeTabNavigator = （）=> (
<Stack.Navigator >/span>
<Stack.Screen
name={HomeTabNavigatorRoutes.TAB_NAVIGATOR}
component={MyTabs}。
options={headerShown: false}} 。
/>
</Stack.Navigator>基本上，結構將看起來像這樣。MainNavigator = { HomeNavigator, UserNavigator }。這樣，每個導航器將是獨立的，你應該能夠從UserNavigator導航到任何螢屏，即使你是在UserNavigator的螢屏上
。轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326335.html
標籤：
上一篇：Formik值未定義