web-dev-qa-db-ja.com

ReactネイティブFlatList水平モードがまったく機能しない

React Native 0.44.0を使用していて、カードスタイルのレイアウトを使用して水平フラットリストを作成しようとしています。何らかの理由で、何をしても水平モードをアクティブにできません。 。常に垂直にレンダリングされるようです...

これが私が使用しているコードです：

 <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
    })} />;

コンポーネントレンダリングのコードを投稿することはできますが、スタイルにパディングとマージン以外は使用しないため、flexまたはflexDirectionのものを使用します。

javascriptreactjsreact-nativereact-native-flatlist
7
GoreDefex

グーグル検索からやってくる人のために、私はそれを理解しました。水平から垂直に、またはその逆に動的に変更できるようにしたい場合は、独自のスクロールコンポーネントをレンダリングできないことがわかりました。したがって、前のコードを取得してrenderScrollComponentの呼び出しをコメントアウトすると、次のように機能します。

_<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) })} />
_

また、そのように動的に位置を更新することもできます。次のようにアイテムサイズを計算するための関数レベルconstを追加します。

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

次に、getItemLayout関数を次のように更新しました。

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

4
GoreDefex

値ではなく、フラットリストタグ内で水平に使用してみてください。

<FlatList
    horizontal
    data={tab_ad}
    renderItem={(item) => this.renderItem(item.item)}
    keyExtractor={(item, index) => index}
    ={this.state}
/>
1
Nguyễn Phúc