反应本机中的两列布局

问题描述：

我想在反应原生应用程序的两列中显示多个元素。这是我到目前为止有：反应本机中的两列布局

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

我的问题是：我怎样才能在中部一些空间（左和右元素之间）？是否有可能，这也可以在用户旋转设备时起作用？

答

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

难以维持这样一个固定的像素尺寸，但它会在屏幕上旋转的大小。或者，您可以在列视图中使用填充以在它们之间留出空间。如果您想要走得太远，也可以禁用屏幕方向更改。希望这可以帮助！

答

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

这只适用于当我在'childStyle'上设置'width：'49％''。但是如果我需要确定，那么这个空间恰好是5px？ – 23tux

答

如果您想确保空间固定在5px，一种解决方案是从Dimensions模块中获取设备的宽度。每一行中的项目可以是这个宽度的一半-2.5px。更改childStyle.width以反映此数字。最后在该行中的每个其他项目之后渲染<View style={{width: 5}} />，并且应该全部设置。（这个解决方案应该工作得很好，不管设备的方向如何）

反应本机中的两列布局

相关推荐