首页 ReactNative·组件

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

把理想意义上的

T：Tab

S：Stack

C：Screen

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

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