Material-Top-Tabs 未在 Modalize 中渲染

Question

我尝试在 modalize 中使用 material-top-tabs，但只有标题进来。页面本身未呈现。当我尝试使用 react-native-tab-view 而不是材质时，页面会呈现，但调整高度时出现问题。所以材质更有意义，但正如我所说，这也不是渲染。

这些是我的代码；

import React from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {CustomerEvaluation} from './FirstRoute';
import {ShippingNotes} from './SecondRoute';
import {Transactions} from './ThirdRoute';
import routes from '../../../constants/routes';

const Tab = createMaterialTopTabNavigator();

export const MaterialTopTabView = () => {
  return (
    <Tab.Navigator
      initialRouteName={routes.CustomerEvaluation}
      screenOptions={{
        tabBarLabelStyle: {fontSize: 12},
        tabBarIndicatorStyle: {
          borderBottomColor: '#32cd32',
          borderBottomWidth: 4,
        },
        tabBarStyle: {backgroundColor: '#f9f9f9', paddingTop: 10},
        swipeEnabled: true,
        tabBarScrollEnabled: true,
        tabBarItemStyle: {width: 'auto', minWidht: '100'},
      }}>
      <Tab.Screen
        name={routes.CustomerEvaluation}
        component={CustomerEvaluation}
        options={{
          tabBarLabel: 'Müşteri değerlendirmesi',
          tabBarLabelStyle: {
            fontSize: 13,
            fontFamily: 'Metropolis-SemiBold',
            textTransform: 'capitalize',
          },
        }}
      />
      <Tab.Screen
        name={routes.ShippingNotes}
        component={ShippingNotes}
        options={{
          tabBarLabel: 'Gönderi notları',
          tabBarLabelStyle: {
            fontSize: 13,
            fontFamily: 'Metropolis-SemiBold',
            textTransform: 'capitalize',
          },
        }}
      />
      <Tab.Screen
        name={routes.Transactions}
        component={Transactions}
        options={{
          tabBarLabel: 'İşlemler',
          tabBarLabelStyle: {
            fontSize: 13,
            fontFamily: 'Metropolis-SemiBold',
            textTransform: 'capitalize',
          },
        }}
      />
    </Tab.Navigator>
  );
};

 <Modalize
          ref={modalizeRef}
          contentRef={contentRef}
          // HeaderComponent={renderTabBar}
          modalStyle={{backgroundColor: '#f9f9f9'}}
          handleStyle={{width: 35, backgroundColor: '#75777a', zIndex: 10000}}
          handlePosition="inside"
          modalHeight={height * 0.6}
          // snapPoint={height * 0.4}
          alwaysOpen={HEADER_HEIGHT + 5}
          childrenStyle={{
            borderTopLeftRadius: 12,
            borderTopRightRadius: 12,
            overflow: 'hidden',
          }}
          scrollViewProps={{
            onScroll: Animated.event(
              [{nativeEvent: {contentOffset: {y: scrollY}}}],
              {
                useNativeDriver: true,
              },
            ),
            scrollEventThrottle: 16,
          }}>
          {/* <Tabs active={index} onIndexChange={handleIndexChange} /> */}

          <MaterialTopTabView />
          {/* <Text style={{color:"#000"}}>sadjhasdkjhaskjdhaskjdk</Text> */}
        </Modalize>

我想要渲染材质顶部选项卡，但它返回空白页面。

Answer 1

我解决了这个问题。我需要使用 style 属性为选项卡导航器提供高度。