Skip to content

[Bug] react native 0.75,组件版本5.2.3 #1390

Open
@DowCore

Description

@DowCore

💬 前提强调

  • 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> ); }
微信图片_20241029165120
微信图片_20241029165129
从截图上可以看出来,第一个tab页面的布局正常,第二个和第三个就不正常了
从打印日志上可以看到,页面加载的时候就直接渲染了三个tab的内容
设置initialPage属性也没有效果

🔴 版本

5.2.3

💻 运行环境

Android

⚫️ npx react-native info输出信息

无控制台异常

补充说明

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions