NativeBase v3+React17项目中rc-tabs组件显示异常如何解决

• 基于NativeBase搭建的ReactJS Web项目集成rc-tabs实现标签页功能时，组件未正常生效：标签被渲染为普通文本，查阅官方文档未找到该场景的对应解决方案
• 项目所用技术栈：NativeBase v3、TypeScript、React 17
• 原有问题代码：

<Center>
  <Tabs 
    defaultActiveKey="1" 
    onChange={callback} 
    style={{
      padding: 2,
      marginRight: 5
    }} 
  >
    <TabPane tab="tab 1" key="1">
      <Popeyes />
    </TabPane>
    <TabPane tab="tab 2" key="2">
      <Reports />
    </TabPane>
  </Tabs>
</Center>

• 实际运行效果：
  

两个核心问题导致渲染异常：

1. 组件命名冲突：NativeBase v3 组件库内部导出了同名的Tabs/TabPane占位组件，未做别名导入时，代码中引用的Tabs/TabPane实际是NativeBase的内置组件，而非rc-tabs提供的标签页组件，因此不会加载rc-tabs的标签交互逻辑，仅渲染子节点文本。
2. 缺失依赖样式：rc-tabs 组件默认不内置样式，需要手动引入对应的CSS文件才能正常渲染标签结构和交互样式，缺失样式文件时也会出现渲染错位、结构异常的问题。

1. 调整导入语句，给rc-tabs组件加别名避免命名冲突，同时引入必需的核心样式文件：

   // 别名导入规避和NativeBase组件重名
   import RcTabs, { TabPane as RcTabPane } from 'rc-tabs';
   // 引入rc-tabs核心样式，不可省略
   import 'rc-tabs/assets/index.css';
   

2. 替换页面中的组件调用，使用别名后的rc-tabs组件：

   <Center>
     <RcTabs 
       defaultActiveKey="1" 
       onChange={callback} 
       style={{
         padding: 2,
         marginRight: 5
       }} 
     >
       <RcTabPane tab="tab 1" key="1">
         <Popeyes />
       </RcTabPane>
       <RcTabPane tab="tab 2" key="2">
         <Reports />
       </RcTabPane>
     </RcTabs>
   </Center>
   

3. 若存在NativeBase全局样式导致的轻微样式偏移，可给RcTabs外层套一层Box组件，手动调整内边距、字体属性适配即可。

内容的提问来源于stack exchange，提问作者Alexc957