ネイティブで反応する2つの列のレイアウト

Question

反応するネイティブアプリケーションで2つの列に複数の要素を表示したい。これは私がこれまで持っているものです。

class App extends Component { 
    render() { 
    const { viewStyle, childStyle } = style; 

    return (
     <View style={viewStyle}> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     </View> 
    ); 
    } 
} 

const space = 5; 
const style = { 
    viewStyle: { 
    flex: 1, 
    flexWrap: 'wrap', 
    flexDirection: 'row', 
    padding: space, 
    marginTop: 20, 
    backgroundColor: 'green' 
    }, 
    childStyle: { 
    width: '50%', 
    height: 100, 
    backgroundColor: 'red', 
    borderWidth: 1, 
    borderColor: 'black', 
    marginBottom: space 
    } 
} 

そして、ここではスクリーンショットです：https://imgur.com/a/wKgDR

私の問題は、次のとおりです。どのように私は左と右の要素の間（​​真ん中にいくつかのスペースを得ることができます）？また、これはユーザーがデバイスを回転させるときにも機能しますか？

Answer 1

あなたはflexDirectionの入った容器を持つことができます：あなたの列は、この内部にあるように、「行」を、。

const {width, height} = require('Dimensions').get('window'); 

<View style={{flex: 1, flexDirection: 'row', width: width}}> 
    <View style={[viewStyle, {flex: 5, flexDirection: 'column'}]> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     ... 
    </View> 

    <View style={{flex: 1}}> 
    </View> 

    <View style={[viewStyle, {flex: 5, flexDirection: 'column'}]> 
     <View style={childStyle} /> 
     <View style={childStyle} /> 
     ... 
    </View> 
</View> 

このような固定ピクセル寸法を維持することが難しいが、画面回転のそれは意志サイズ：次に、あなたの列の間に挿入された空のビューを持っています。あるいは、列ビュー内でパディングを使用して、それらの間にスペースを置くこともできます。また、画面の向きの変更を無効にすることもできます。お役に立てれば！

Answer 2

あなたのViewStyleプロパティに追加します。 justifyContent: 'space-between'

Answer 3

スペースが5pxに固定されていることを確認するには、Dimensionsモジュールからデバイスの幅を取得することが1つの解決策になります。行内の各アイテムは、この幅の半分-2.5ピクセルになります。この数値を反映するようにchildStyle.widthを変更します。最後に、行内の他のすべてのアイテムの後に<View style={{width: 5}} />をレンダリングし、すべて設定する必要があります。 （この解決策はデバイスの向きに関係なく正常に動作するはずです）