亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 react native expo 中使用 flex 將同一行的 2 張卡片與動態內容對齊

在 react native expo 中使用 flex 將同一行的 2 張卡片與動態內容對齊

慕妹3242003 2023-11-12 22:24:36
我在 react native expo 項目中使用卡片,卡片是動態創建和放置的,但我希望 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貢獻1829條經驗 獲得超4個贊

嘗試給 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>

? ? );

? }

}

查看完整回答
反對 回復 2023-11-12
  • 1 回答
  • 0 關注
  • 196 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號