ネイティブフレックスボックスに反応する - パーセンテージを行う方法||列||応答性の高い||グリッドなど

Question

最後の数週間、iOSで反応して作業した後、フレックススタイリングのいくつかの欠点に遭遇したようです...特に、応答性のある動作になると、

たとえば、カードを含むビュー（これらのカードのメタデータはAPIに由来します）を作成したいとします。あなたは、このビューの私が持っている現在の実装では、2を持つ行に返された配列を分割

各2.後にカードが表示幅の50％のマイナスマージン&パディングすること、およびラップしたいですアイテム。リストコンテナには flex: 1, flexDirection: 'column、行には flex: 1、次に各カードには flex: 1があります。最終的な結果は、各行に2つの列があり、これはビュー幅の半分を均等に占有します。

React Nativeスタイルでこれを行う簡単な方法はありません.Javascriptを使用せずにデータの前処理を行うことで、スタイルが正しく出力されるようです。誰にも何か提案はありますか？

Answer 1

はhas percentage supportすでにネイティブに反応：

<View style={[style.parent]}> 
    <View style={[style.child, {backgroundColor: '#996666'} ]} /> 
    <View style={[style.child, {backgroundColor: '#339966'} ]} /> 
    <View style={[style.child, {backgroundColor: '#996633'} ]} /> 
    <View style={[style.child, {backgroundColor: '#669933'} ]} /> 
</View> 

var style = StyleSheet.create({ 
    parent: { 
     width: '100%', 
     flexDirection: 'row', 
     flexWrap: 'wrap' 
    }, 
    child: { 
     width: '48%', 
     margin: '1%', 
     aspectRatio: 1, 
    } 
}) 

Answer 2

ありフレキシボックスでこれを達成するためのより良い方法であるが、私は通常、ビューポートの幅とビューポートの高さのために、「割合」ヘルパーvwとvhを定義し、測定のCSSビューポートのサイズ単位にちなんで名付けられたことがあります。

import {Dimensions} from 'react-native'; 

function vw(percentageWidth) { 
    return Dimensions.get('window').width * (percentageWidth/100); 
} 

function vh(percentageHeight) { 
    return Dimensions.get('window').height * (percentageHeight/100); 
} 

あなたが知られているとは限らを持っている場合にのみ、このテクニックを使用する必要があります

const COLUMNS = 3; 
const MARGIN = vw(1); 
const SPACING = (COLUMNS + 1)/COLUMNS * MARGIN; 

const grid = { 
    flex: 1, 
    flexWrap: 'wrap', 
    flexDirection: 'row', 
    justifyContent: 'flex-start' 
}; 

const cell = { 
    marginLeft: MARGIN, 
    marginTop: MARGIN, 
    width: vw(100)/COLUMNS - SPACING 
} 

return (
    <View style={grid}> 
    {this.props.things.map(thing => <View style={cell} />)} 
    </View> 
) 

：グリッド内のアイテムを流れるように

は、あなたがして余白とビューポートのサイズを考慮し、項目のための適切なサイズを計算することができますd個のアイテム - 任意の量のカードでは、パフォーマンス上の理由からListViewを使用し、データセットを手動で行に分割する必要があります。

Answer 3

あなたはjustifyContentを使用することができます： '宇宙の間の'

<View style={styles.feed}> 
    <View style={styles.card} /> 
    <View style={styles.card} /> 
    <View style={styles.card} /> 
    <View style={styles.card} /> 
</View> 

feed: { 
flex: 1, 
flexDirection: 'row', 
flexWrap: 'wrap', 
padding: 16, 
justifyContent: 'space-between' } 


card: { 
backgroundColor: 'white', 
width: '48%', 
aspectRatio: 1, 
marginBottom: 16 } 

screenshot