Description
💬 前提强调
- I have searched the issues of this repository and believe that this is not a duplicate.
🙋 描述详情/重现步骤
import {Tabs} from '@ant-design/react-native'; import * as React from 'react'; import {View, Text, TouchableOpacity} from 'react-native'; import tw from 'twrnc'; interface OrderItemProps { name: string; } function OrderItem({name}: OrderItemProps) { return ( <View style={twborder border-zinc-300 flex-1 bg-red-300}> <Text>{name.repeat(20)}</Text> </View> ); } export default function OrderScreen() { const tabs = [ {title: 'First_Tab'}, {title: 'Second_Tab'}, {title: 'Third_Tab'}, ]; const renderTabs = (tab: any, index: number) => { const data = Array.from({length: 15}, (v, k) => ({ key: item_${k}, label: Item ${k}, backgroundColor: 'red', })); return ( <View key={tab.title} style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#ddd', }}> <View style={twflex-1 flex flex-row flex-wrap}> {data.map(t => { return ( <View key={${t.key}${index}} style={[twh-[128px] p-2, {width: '25%'}]}> <OrderItem key={${t.key}${index}} name={t.label}></OrderItem> </View> ); })} </View> </View> ); }; return ( <View style={twflex-1}> <Tabs tabs={tabs} tabBarPosition="top" tabBarActiveTextColor="rgb(22, 119, 255)"> {tabs.map((tab, index) => renderTabs(tab, index))} </Tabs> </View> ); }
从截图上可以看出来，第一个tab页面的布局正常，第二个和第三个就不正常了
从打印日志上可以看到，页面加载的时候就直接渲染了三个tab的内容
设置initialPage属性也没有效果
🔴 版本
5.2.3
💻 运行环境
Android
⚫️ npx react-native info输出信息
无控制台异常
补充说明
No response