Material 顶部选项卡导航器不适用于嵌套导航

Question

我正在尝试在堆栈导航器的滚动视图中使用material-top-tab-navigator。但正如您在屏幕截图中看到的那样，选项卡导航器的各个屏幕没有呈现任何内容。怎么解决？

提前致谢:)

我的选项卡导航器如下所示：

TabNavigator.js：

import {ScrollView, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 500,
        width: 500,
        backgroundColor: 'red',
      }}>
      <Text>Notifications!</Text>
    </View>
  );
}


const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: {fontSize: 12},
        tabBarStyle: {backgroundColor: 'powderblue'},
      }}>
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{tabBarLabel: 'Home'}}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{tabBarLabel: 'Updates'}}
      />
      
    </Tab.Navigator>
  );
}

export default function TabNavigator(props) {
  return (
    <ScrollView style={{backgroundColor: 'white'}}>
      <NavigationContainer independent={true}>
        <MyTabs />
      </NavigationContainer>
    </ScrollView>
  );
}

我使用此选项卡导航器的组件如下：

Screen.js：

import {
  ImageBackground,
  ScrollView,
  View,

} from 'react-native';
import {widthPercentageToDP as wp} from 'react-native-responsive-screen';
import {
  profileBackground,
  leftIcon,
} from '../../Assets/Image';
import {IconButton} from 'react-native-paper';
import TabNavigator from './TabNavigator';



export default function (props) {


  return (
    
      <ScrollView style={{backgroundColor: 'white'}}>
        <ImageBackground style={{width: wp(100)}} source={profileBackground}>
          <IconButton
            icon={leftIcon}
            onPress={() => {
              props.navigation.goBack();
            }}
          />
          
        </ImageBackground>
        
        <View style={{marginTop: 20, marginHorizontal: 20}}>
          <TabNavigator />
        </View>
      </ScrollView>
    
  );
}

Answer 1

为包装容器添加 flex 属性：

该属性需要添加到 contentContainerStyle 属性中，而不是 style 属性中

<Scrollview contentContainerStyle={{flex: 1}}

Answer 2

@Abiranjan 的解决方案非常适合我的情况。我必须将 ScrollView 添加到我的嵌套屏幕中，并且还添加了

<Scrollview contentContainerStyle={{flex: 1}}

使其发挥作用