web-dev-qa-db-ja.com

React-nativeで水平リストビューまたはFlatListを実行する方法

React-nativeで水平のListViewまたはFlatListを作成する方法を探しています。以下の画像のように： https://i.stack.imgur.com/D4RA5.jpg

Flexで管理しようとしましたが、奇妙な結果になり、常に垂直のListViewで

アイデアがあれば、教えてください。

よろしく、

react-nativehorizontal-scrollingreact-native-androidreact-native-listviewreact-native-ios
21
G Clovs

答えは、水平プロパティセットをtrueに追加することです。

ええ、ドキュメントには記載されていません： https://facebook.github.io/react-native/docs/listview.html

したがって、明らかにListViewはScrollViewの子なので、Horizo​​ntal Boolを取得しました。

<ListView
    horizontal={true}
    style={{flex:1}}
    dataSource={this.state.dataSource}
    renderRow={(data) => <Row {...data} />}
/>

<FlatList
    horizontal={true}
    data={this.props.data}
    extraData={this.state}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
/>

チャオ

44
G Clovs

最後の回答をありがとう、ListViewは非推奨になりました。

flatListを使用したソリューション：

<FlatList
    style={styles.videos_flatList}
    horizontal={true}
    data={data1}
    renderItem={({item}) => 
        <RowItem/>
    }

    ItemSeparatorComponent={() => {
        return (
            <View
                style={{
                height: "100%",
                width: 20,
                backgroundColor: "#CED0CE",

                }}
            />
        );
    }}

    keyExtractor={(item, index) => index.toString()}
/>
3
Shlomi Fresko