首页 ReactNative·组件

1、最重要的组件导航和Tab^1

把理想意义上的

| |

T —— T

| |

C C

转变成

| |

S —— T

| |

C C

T:Tab

S:Stack

C:Screen

这样做可以避免二级页面仍然有Tab菜单出现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//导入两个Screen
import HomeScreen from './src/screen/HomeScreen';
import DetailsScreen from './src/screen/DetailsScreen';

function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings screen</Text>
<Button
title="Go to Details"
onPress={() => {}}
/>
</View>
);
}

const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
<SettingsStack.Screen name="Details" component={DetailsScreen} />
</SettingsStack.Navigator>
);
}

//在首页的Tab下,又引入其他Tab的Stack
const Tab = createBottomTabNavigator();
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ title: '首页', headerShown: true }}/>
<Tab.Screen name="SettingsStack" component={SettingsStackScreen} options={{ title: '设置', headerShown: false }}/>
</Tab.Navigator>
);
}

//顶层放的是一个stack,并不是一个Tab
//这样可以解决在二级页面也出现Tab的问题
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="HomeTabs" component={HomeTabs} options={{headerShown: false }}/>
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}