反應本機中的兩列布局

我想在反應原生應用程序的兩列中顯示多個元素。這是我到目前爲止有：反應本機中的兩列布局

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

我的問題是：我怎樣才能在中部一些空間（左和右元素之間）？是否有可能，這也可以在用戶旋轉設備時起作用？

來源

2017-04-07 23tux

你可以有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>

難以維持這樣一個固定的像素尺寸，但它會在屏幕上旋轉的大小。或者，您可以在列視圖中使用填充以在它們之間留出空間。如果您想要走得太遠，也可以禁用屏幕方向更改。希望這可以幫助！

來源

2017-04-07 17:20:49 kwishnu

-1

添加在您的viewStyle： justifyContent: 'space-between'

來源

2017-04-07 12:01:49

這隻適用於當我在'childStyle'上設置'width：'49％''。但是如果我需要確定，那麼這個空間恰好是5px？ – 23tux

如果您想確保空間固定在5px，一種解決方案是從Dimensions模塊中獲取設備的寬度。每一行中的項目可以是這個寬度的一半-2.5px。更改childStyle.width以反映此數字。最後在該行中的每個其他項目之後渲染<View style={{width: 5}} />，並且應該全部設置。（這個解決方案應該工作得很好，不管設備的方向如何）

來源

2017-04-07 21:32:17 Maxwelll

反應本機中的兩列布局

回答

相關問題