首页 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>
    );
}