Question

我试图在一定的距离（marginLeft）上画一条线。但这行不通。每当我应用marginLeft：'16 .666％'时，垂直线的宽度就会大于我设置的宽度，即8。

如果我删除左边距：“ 16.666％”。然后，垂直线处于正确的宽度。 marginLeft问题在下面的drawLine（）中：

drawLine(){
    return(
      <View style= {[styles.verticalLine,{marginLeft:'16.666%'}]}></View>

}

以下是我的标记：

<View style={styles.middleWrapper}>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      <TouchableOpacity style={[styles.child]}></TouchableOpacity>
      {this.drawLine()}

const styles = StyleSheet.create({

middleWrapper:{
width: '90%',
flexDirection: 'row',
flexWrap: 'wrap',
marginLeft:'5%',
marginRight:'5%',
aspectRatio:1
},
child: {
width: '33%',
aspectRatio: 1,
margin: '0.16666%',
backgroundColor: '#dfe6df',
justifyContent:'center'
},


verticalLine:{
position:'absolute',
width: 8,
height: '100%',
backgroundColor: 'red'
}

});

如何解决drawLine（）中的边距问题？

边距不能在Flex容器中正常工作-react-native-Android

0 个答案: