Open DowCore opened 2 weeks ago
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`}>
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={tw
</View>
); } export default function OrderScreen() { const tabs = [ {title: 'First_Tab'}, {title: 'Second_Tab'}, {title: 'ThirdTab'}, ]; 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属性也没有效果
, label:
, backgroundColor: 'red', })); return ( <View key={tab.title} style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#ddd', }}> <View style={tw
}> {data.map(t => { return ( <View key={
} style={[tw
, {width: '25%'}]}> <OrderItem key={
} name={t.label}></OrderItem> </View> ); })} </View> </View> ); }; return ( <View style={tw
}> <Tabs tabs={tabs} tabBarPosition="top" tabBarActiveTextColor="rgb(22, 119, 255)"> {tabs.map((tab, index) => renderTabs(tab, index))} </Tabs> </View> ); }
5.2.3
Android
npx react-native info
无控制台异常
No response
💬 前提强调
🙋 描述详情/重现步骤
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`}>); } export default function OrderScreen() { const tabs = [ {title: 'First_Tab'}, {title: 'Second_Tab'}, {title: 'ThirdTab'}, ]; const renderTabs = (tab: any, index: number) => { const data = Array.from({length: 15}, (v, k) => ({ key: `item${k}
从截图上可以看出来，第一个tab页面的布局正常，第二个和第三个就不正常了
从打印日志上可以看到，页面加载的时候就直接渲染了三个tab的内容
设置initialPage属性也没有效果
, 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> ); }🔴 版本
5.2.3
💻 运行环境
Android
⚫️
npx react-native info输出信息无控制台异常
补充说明
No response