我正在使用& quot材料-頂部-標簽& quot。我已經為組件創建了一個名為& quotLightingConfigScreen & quot。我面臨的問題是只有標題，即& quot配置& quot可見，并且組件部分沒有屏幕呈現。以下是代碼，供您參考:

import React, { useEffect, useState } from 'react';

import UnderDevComponent from '../../../../../components/utility/UnderDevComponent';
import { ScrollView, BackHandler, View, Text, TouchableOpacity, Dimensions } from 'react-native';
import DeviceDetailsToolBar from '../../../../../components/actionBar/DeviceDetailsToolBar';
import { IDevice } from '../../../../../network/models/IDevices';
import { EventRegister } from 'react-native-event-listeners';
import Card from '../../../../../components/Card';
import { cardStyles, cardStyles as styles } from '../../../../../../assets/styles/ListCardStyles';
import { doCapitalizeFirstChar } from '../../../../../utility/Helper';
import { padding } from '../../../../../../assets/dimen/dimen';
import { DeviceCategory } from '../../helper/DeviceCategoryEnum';
import { DeviceRoute } from '../../../../../navigation/DevicesNavigator';
import { Switch, Slider } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { TabView, SceneMap } from 'react-native-tab-view';
import { NavigationContainer } from '@react-navigation/native';
//import TabScreens from './TabScreens';
import Collapsible from 'react-native-collapsible';
import DownArrowIcon from '../../../../../../assets/img/icons/bottom_sheet_down_arrow.svg';
import UpArrowIcon from '../../../../../../assets/img/icons/bottom_sheet_up_arrow.svg';
import LightingConfigScreen from './LightingConfigScreen';
import colors from '../../../../../../assets/color/colors';
import { fontFamily } from '../../../../../../assets/styles/FontStyle';
import { isAndroidTablet } from '../../../../../utility/DeviceHelper';

const Tab = createMaterialTopTabNavigator();

function LightingDetailScreen({ navigation, route }): JSX.Element {
    const deviceData: IDevice = route.params.deviceData;

    const [intensity, setIntensity] = useState(0); // Initial intensity value
    const [switchValue, setSwitchValue] = useState(false);
    const [isCardCollapsed, setIsCardCollapsed] = useState(false);

    const handleIntensityChange = (value) => {
        setIntensity(value);
    };

    const handleSwitchChange = (value) => {
        setSwitchValue(value);
    };


    useEffect(() => {
        const backAction = () => {
            EventRegister.emit('myCustomEvent', 'default');
            // navigation?.goback();
            route?.params?.navigation?.goback('o');
            return true;
        };

        const backHandler = BackHandler.addEventListener(
            'hardwareBackPress',
            backAction,
        );

        return () => backHandler.remove();
    }, []);

    return (
        <ScrollView>
            <DeviceDetailsToolBar
                // deviceData={undefined}
                menuShouldVisible={true}
                title={deviceData?.name}
                navigation={navigation}
            />

            <Card style={styles.detailCardViewContainer}>
                <View style={styles.detailHeaderRowContainer}>
                    <Text style={styles.cardHeader}>Device</Text>
                    <TouchableOpacity onPress={() => setIsCardCollapsed(!isCardCollapsed)}>
                        {isCardCollapsed ? (
                            <DownArrowIcon width={10} height={10} style={styles.iconStyle} />

                        ) : (
                            <UpArrowIcon width={10} height={10} style={styles.iconStyle} />
                        )}
                    </TouchableOpacity>
                </View>

                <Collapsible collapsed={isCardCollapsed}>
                    <View style={styles.lineView} />
                    <View style={styles.detailTrailContainer}>
                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>IP Address</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.ipAddress}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>MAC Address</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.macAddress}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>FW Version</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.fwVersion}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Serial Number</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.serialNumber}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Last Updated</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.lastUpdatedOn}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Last Reset At</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>-</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Model Number</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.modelNumber}</Text>
                            </View>
                        </View>

                        <View style={styles.rowContainer}>
                            <View style={styles.leftAlignContainer}>
                                <Text style={styles.rowLabel}>Category</Text>
                            </View>
                            <View style={styles.rightAlignContainer}>
                                <Text style={styles.rowValue}>{deviceData?.category}</Text>
                            </View>
                        </View>
                    </View>
                </Collapsible>
            </Card>

            <Card style={styles.detailCardViewContainer}>
                <View style={styles.detailHeaderRowContainer}>
                    <Text style={styles.cardHeader}>Controls</Text>
                </View>

                <View style={styles.lineView} />

                <View style={styles.detailTrailContainer}>
                    <View style={styles.rowContainer}>
                        <View style={styles.leftAlignContainer}>
                            <Text style={styles.rowLabel}>Intensity</Text>
                        </View>
                        <View style={styles.intensityContainer}>
                            <Text style={styles.rowValue}>{intensity}%</Text>
                        </View>
                        <View style={styles.rightAlignContainer}>
                            <Slider
                                style={{ width: '70%', marginTop: -12 }}
                                minimumValue={0}
                                maximumValue={100}
                                value={intensity}
                                step={1}
                                thumbStyle={{
                                    width: 10, // Customize thumb width
                                    height: 10, // Customize thumb height
                                    borderRadius: 10, // Make thumb circular
                                }}
                                trackStyle={{
                                    height: 2, // Customize track height
                                    borderRadius: 0, // Make track rounded
                                }}
                                onValueChange={handleIntensityChange}
                                thumbTintColor="#0F8D48" // Customize thumb color
                                minimumTrackTintColor="#0F8D48"
                            />
                        </View>
                    </View>

                    <View style={[styles.SwitchContainer, { marginBottom: padding() }]}>
                        <View style={styles.leftAlignContainer}>
                            <Text style={styles.rowLabel}>Switch On/Off</Text>
                        </View>
                        <Switch
                            style={{ marginTop: -5, marginRight: -9 }}
                            value={switchValue}
                            onValueChange={handleSwitchChange}
                            thumbColor={'#FFFFFF'}
                            trackColor={{ false: '#f4f3f4', true: '#0F8D48' }}
                        />
                    </View>
                </View>
            </Card>
            
            <Tab.Navigator>         //USING TAB NAVIGATOR HERE
                <Tab.Screen name="Configuration" component={LightingConfigScreen} />
                {/* <Tab.Screen name="Activity Logs" component={LightingActivityLogsScreen} /> */}
            </Tab.Navigator>
        </ScrollView>
    );
}
export default LightingDetailScreen;

我在最后創建頂部選項卡。

下面是上面的最小代碼:

import React, { useEffect, useState } from 'react';

import UnderDevComponent from '../../../../../components/utility/UnderDevComponent';
import { ScrollView, BackHandler, View, Text, TouchableOpacity, Dimensions } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { TabView, SceneMap } from 'react-native-tab-view';
import { NavigationContainer } from '@react-navigation/native';
import LightingConfigScreen from './LightingConfigScreen';
import LightingActivityLogsScreen from './LightingActivityLogsScreen'


const Tab = createMaterialTopTabNavigator();

function LightingDetailScreen({ navigation, route }): JSX.Element {
    //Content for the Lighting Detail Screen

    return (
        <ScrollView>
           
            //TSX Code for the Lighting Detail Screen
            

            //TOP TABS
            <Tab.Navigator> 
                <Tab.Screen name="Configuration" component={LightingConfigScreen} />
                <Tab.Screen name="Activity Logs" component={LightingActivityLogsScreen} />
            </Tab.Navigator>
        </ScrollView>
    );
}
export default LightingDetailScreen;