我正在使用& quot材料-頂部-標簽& quot由于某種原因，選項卡的組件部分沒有呈現。下面是我的代碼的基本結構:

function ConfigurationsScreen() {
    // Content of the Configurations screen
    return (
    // TSX code for the Configurations screen              
  );
}

function ActivityLogsScreen() {
    // Content of the Activity Logs screen
    return (
    // TSX code for the Activity Logs screen
  );
}

const Tab = createMaterialTopTabNavigator();

export default function TabScreens() {
    return (
            <Tab.Navigator>
                <Tab.Screen name="Configurations" component={ConfigurationsScreen} />
                <Tab.Screen name="Activity Log" component={ActivityLogsScreen} />
            </Tab.Navigator>
    );
}

我在我的主代碼中調用這個TabScreens，如下所示:

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 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>
                </View>

                <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>
            </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>

            <TabScreens /> //TAB SCREENS CALLED HERE
        
    </ScrollView>
    );
}

組件，即& quot配置屏幕& quot和& quotActivityLogsScreen & quot不可見。