We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
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属性也没有效果
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
}> <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:
, 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
The text was updated successfully, but these errors were encountered:
No branches or pull requests
💬 前提强调
🙋 描述详情/重现步骤
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
border 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={tw
flex-1 flex flex-row flex-wrap}> {data.map(t => { return ( <View key={
${t.key}${index}} style={[tw
h-[128px] p-2, {width: '25%'}]}> <OrderItem key={
${t.key}${index}} name={t.label}></OrderItem> </View> ); })} </View> </View> ); }; return ( <View style={tw
flex-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
The text was updated successfully, but these errors were encountered: