Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
DowCore opened this issue Oct 29, 2024 · 0 comments
Open
1 task done

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

DowCore opened this issue Oct 29, 2024 · 0 comments

Comments

@DowCore
Copy link

DowCore commented Oct 29, 2024

💬 前提强调

  • 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants