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

Question

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ものです。

Answer 1

Google検索を利用しているユーザーにとっては、わかりました。水平から垂直、またはその逆に動的に変更できるようにするには、独自のスクロールコンポーネントをレンダリングできないことがわかります。私はそうのような...私の以前のコードを取ると、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) })} /> 

また、私は動的にそのようなポジショニングを更新することができます。そして、私はこのように見えるために私getItemLayout機能を更新

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

：

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

私はこのように私の項目のサイズを計算する関数レベルのconstとして追加します