Saya menggunakan React Native 0.44.0 dan saya mencoba membuat FlatList horizontal menggunakan tata letak gaya kartu. Untuk alasan apa pun, apa pun yang saya lakukan, saya tidak dapat mengaktifkan mode horizontal. Tampaknya selalu dirender secara vertikal ...

Berikut adalah kode yang saya gunakan:

 <FlatList
    horizontal={true}
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    ref={ref => {
        this.newsFeedListRef = ref;
    }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({
        index,
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index + headerBarHeight
    })} />;

Saya dapat memposting kode untuk render komponen saya tetapi tidak ada yang menggunakan apa pun selain padding dan margin untuk gaya, jadi flex atau flexDirection.

11
GoreDefex 19 Agustus 2017, 22:13

2 jawaban

Jawaban Terbaik

Bagi siapa pun yang masuk dari pencarian Google, saya menemukan jawabannya. Ternyata Anda tidak dapat merender komponen gulir Anda sendiri jika Anda ingin dapat mengubah secara dinamis dari horizontal ke vertikal atau sebaliknya. Jadi, jika saya mengambil kode saya sebelumnya dan mengomentari panggilan ke renderScrollComponent, maka itu berfungsi ... seperti:

<FlatList
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    horizontal={this.state.isHorizontal}
    ref={ref => { this.newsFeedListRef = ref; }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    //renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({ index, length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) })} />

Saya juga dapat memperbarui posisi secara dinamis seperti itu. Saya menambahkan const level fungsi untuk menghitung ukuran item saya seperti ini:

const ITEM_SIZE = this.state.isHorizontal ? ITEM_HEIGHT : this.props.width;

Kemudian saya memperbarui fungsi getItemLayout saya agar terlihat seperti ini:

getItemLayout={(data, index) => ({ index, length: ITEM_SIZE, offset: ITEM_SIZE * index })} />

3
GoreDefex 19 Agustus 2017, 19:29

Coba gunakan tag flatlist horizontal di dalam, bukan nilai, itu berfungsi untuk saya: D

<FlatList
    horizontal
    data={tab_ad}
    renderItem={(item) => this.renderItem(item.item)}
    keyExtractor={(item, index) => index}
    ={this.state}
/>
0
Nguyễn Phúc 21 Maret 2018, 01:47