第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 react native expo 中使用 flex 將同一行的 2 張卡片與動(dòng)態(tài)內(nèi)容對(duì)齊

在 react native expo 中使用 flex 將同一行的 2 張卡片與動(dòng)態(tài)內(nèi)容對(duì)齊

慕妹3242003 2023-11-12 22:24:36
我在 react native expo 項(xiàng)目中使用卡片,卡片是動(dòng)態(tài)創(chuàng)建和放置的,但我希望 2 張卡片顯示在同一行上。所需代碼let data = [{ id: "1", title: "First", desc: "Some desc", time: "4pm" },{ id: "2", title: "Second", desc: "Some second desc", time: "5pm" },           ];class App extends React.Component {    constructor(props) {        super(props);        this.state = {            products: data,        };    }        render() {        return (            <View style={{display: "flex", flex: 1}}>                                    <View style={{}}>                    <FlatList                        data={this.state.products}                        renderItem={({ item }) => (                            <TouchableOpacity>                                <Card                                    style={{                                        margin: 5,                                    }}                                >                                    <View style={styles.checkCards}>                                        <Text>{item.title}</Text>                                    </View>                                </Card>                            </TouchableOpacity>                        )}                    />                </View>            </View>           )}}
查看完整描述

1 回答

?
浮云間

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊

嘗試給 FlatListnumColumns={2}

https://img1.sycdn.imooc.com/6550e0630001ab6e03240152.jpg

let data = [

? { id: '1', title: 'First', desc: 'Some desc', time: '4pm' },

? { id: '2', title: 'Second', desc: 'Some second desc', time: '5pm' },

];


export default class App extends React.Component {

? constructor(props) {

? ? super(props);

? ? this.state = {

? ? ? products: data,

? ? };

? }


? render() {

? ? return (

? ? ? <View style={{ display: 'flex', flex: 1, marginTop: 24 }}>

? ? ? ? <View style={{}}>

? ? ? ? ? <FlatList

? ? ? ? ? numColumns={2}

? ? ? ? ? ? data={this.state.products}

? ? ? ? ? ? renderItem={({ item }) => (

? ? ? ? ? ? ? <TouchableOpacity style={{ flex: 1, }}>

? ? ? ? ? ? ? ? <Card

? ? ? ? ? ? ? ? ? style={{

? ? ? ? ? ? ? ? ? ? margin: 5,

? ? ? ? ? ? ? ? ? ? padding: 10,

? ? ? ? ? ? ? ? ? }}>

? ? ? ? ? ? ? ? ? <View style={{}}>

? ? ? ? ? ? ? ? ? ? <Text>{item.title}</Text>

? ? ? ? ? ? ? ? ? </View>

? ? ? ? ? ? ? ? </Card>

? ? ? ? ? ? ? </TouchableOpacity>

? ? ? ? ? ? )}

? ? ? ? ? />

? ? ? ? </View>

? ? ? </View>

? ? );

? }

}

查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 1 回答
  • 0 關(guān)注
  • 228 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)