如何在本机反应中将两个按钮放在同一行中?
Posted
技术标签:
【中文标题】如何在本机反应中将两个按钮放在同一行中?【英文标题】:How to place two buttons within the same row in react native? 【发布时间】:2019-03-16 11:51:53 【问题描述】:在弹出对话框中,我想将按钮放在同一行,但现在我得到了这样的https://i.stack.imgur.com/sJ30p.png.Following 是给定的样式。
<PopupDialog
ref=popupDialog =>
this.popupDialog = popupDialog;
dialogStyle= backgroundColor: "#ddd", height: 200, width:320, border:10,padding:10
overlayBackgroundColor="#fff"
dismissOnTouchOutside=true
>
<View style=styles.dialogContentView>
<Text style=fontSize:18>Are you sure you want to submit?</Text>
<View style=styles.button_1>
<Button
title="Yes"
onPress=() =>
console.log('clicked')
/>
</View>
<View style=styles.button_1>
<Button
title="No"
onPress=() =>
console.log('clicked')
/>
</View>
</View>
</PopupDialog>
.....
....
dialogContentView:
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
,
button_1:
width: '40%',
height: 30,
【问题讨论】:
【参考方案1】:在</Text>
之后将View
父级添加到Button
样式flexDirection: 'row'
之后
<View style= flexDirection: 'row' >
<View style=styles.button_1>
<Button
title="Yes"
onPress=() =>
console.log('clicked');
/>
</View>
<View style=styles.button_1>
<Button
title="No"
onPress=() =>
console.log('clicked');
/>
</View>
</View>
你可以试试这个snack
【讨论】:
【参考方案2】:试试这个 full width 没有任何 空格 或 margin 只需复制粘贴
<View style= flexDirection: "row" >
<View style= flex: 1 >
<TouchableOpacity style= alignSelf: 'stretch',backgroundColor: '#2980B9' onPress=() => onSavePress >
<Text style= alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 >Save</Text>
</TouchableOpacity>
</View>
<View style=borderLeftWidth: 1,borderLeftColor: 'white'/>
<View style= flex: 1>
<TouchableOpacity style= alignSelf: 'stretch',backgroundColor: '#2980B9' onPress=() => onCancelPress >
<Text style= alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 >Cancel</Text>
</TouchableOpacity>
</View>
</View>
【讨论】:
【参考方案3】:为此,我通常创建一个视图,将其 flexDirection
设置为 'row'
并将按钮组件放入其中。因此,您的代码将如下所示:
<View style= flexDirection: 'row' >
<Button title='Button 1'/>
<Button title='Button 2'/>
</View>
希望对你有帮助。
【讨论】:
以上是关于如何在本机反应中将两个按钮放在同一行中?的主要内容,如果未能解决你的问题,请参考以下文章