我正在尝试在React Native中设计以下布局。
我无法如上所述绘制水平线。我如何绘制但未应用右边距的一些方法
代码
<View style={{ flexDirection: 'row' }}>
<Text style={styles.text}>
Search
</Text>
<View style={styles.viewStyleForLine1}></View>
</View>
样式
viewStyleForLine1: {
borderWidth: 1,
borderColor: '#cc0000',
alignSelf: 'stretch',
marginLeft: 5,
marginRight: 5,
width:"100%"
},
关于内容居中的更多编辑
这是我的观点
<View style={{ flexDirection: 'row' }}>
<Text style={styles.text}>
Search</Text>
<View style={styles.viewStyleForLine1}></View>
</View>
样式
text: {
marginTop: 16,
fontSize: 30,
fontWeight: 'bold',
color: '#cc0000',
marginLeft: 15
},
viewStyleForLine1: {
borderBottomWidth: 1,
borderColor: '#cc0000',
marginLeft: 5,
alignItems:"center",
marginRight: 15,
alignSelf:"center",
flex:1
},
我应该做什么修改?
您可以将样式width: "100%"
更改为“ flex:1”。如果您希望右视图占据其余宽度,则“ flex:1”表示其余宽度属于它。它具有权重。您必须在两个组件中使用的百分比。有关UI适配器的更多提示,您可以阅读此article
viewStyleForLine1: {
borderWidth: 1,
borderColor: '#cc0000',
alignSelf: 'stretch',
marginLeft: 5,
marginRight: 5,
flex:1
},