React Nativeのブートストラップ風col-row-grid機能？

私が画像でデモンストレーションした方が良いでしょう。React Nativeのブートストラップ風col-row-grid機能？

これは私が達成しようとしているものです。風景モードのタブレットサイズを想定します。 Xの要素が配列されているとしましょう。 3つのアイテムが連続している場合は、その行を横切ってマップしたいです。ブートストラップでは、私はcol-md-4のような何かを3回行うことができます。

現在、私はnative-baseを使用しています。興味深いのはgrid systemsですが、正確には私が望んでいたものではありません。

これは私が今持っているものです。

<Grid> 
    <Row> 
    { recipeStore.categories.map((category, index) => { 
     return (
     <Col key={index} style={{height: 300}}> 
      <Card> 
      <CardItem> 
       <Body> 
       <Text>{ category.name }</Text> 
       </Body> 
      </CardItem> 
      </Card> 
     </Col> 
    ) 
    })} 
    </Row> 
</Grid>

がどのように配列の反復が3列に記入してもらうことができますし、次の行に行きますか？

出典

2017-08-17 Iggy

親コンテナにflexWrap: 'wrap'を使用して、子にflexBasisを使用できます。

import React, { Component } from 'react'; 
import { View, StyleSheet } from 'react-native'; 

const ABox =() => <View style={styles.box} />; 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     <ABox /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexWrap: 'wrap', 
    flexDirection: 'row', 
    paddingTop: 20, 
    }, 
    box: { 
    flexBasis: 75, 
    borderWidth: 1, 
    borderColor: 'black', 
    height: 40, 
    margin: 10, 
    } 
});

スナック：https://snack.expo.io/HkUFUp7ub

出典

2017-08-18 01:44:33 rmevans9

これを行うための最善の方法は、それがパフォーマンスの良い、使いやすいですFlatListを使用しています。リストを作成することをお勧めします（this参照）。さらに、プロジェクトに余分なパッケージを追加する必要はありません。あなたは簡単に以下のようにFlatListを使用することができます。

_keyExtractor = (item, index) => index; 

    _renderItem = ({item: category}) => (
    <Card> 
     <CardItem> 
      <Body> 
      <Text>{ category.name }</Text> 
      </Body> 
     </CardItem> 
     </Card> 
); 

    render() { 
    return (
     <FlatList 
     numColumns={3} 
     data={recipeStore.categories} 
     keyExtractor={this._keyExtractor} 
     renderItem={this._renderItem} 
     /> 
    ); 
    }

注意：あなたは、各行の項目数を定義するためにnumColumns peropertyを使用する必要があります。 FlatListのドキュメントはhereにあります。

出典

2017-08-18 05:36:28

React Nativeのブートストラップ風col-row-grid機能？

答えて

関連する問題