javascript - 如何在本机反应中将两个按钮放在同一行中?
问题描述
在弹出对话框中,我想将按钮放在同一行,但现在我变得像这样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,
}
解决方案
将View
父级添加到Button
具有样式的两个组件flexDirection: 'row'
之后</Text>
<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>
你可以试试这个小吃
推荐阅读
- excel - 十月的最后一个星期六
- c++ - 为什么我的数组只接受它们中的第一个数字?
- r - R: purrr: 支付 %.%er: walk 是否通过了整个管道向量,而不是元素?
- git - Android Studio 上 Git 的多个 Commit 有什么不同?
- javafx - 将我的文本字段更改为大写/小写未按预期工作
- c# - SendKeys.SendWait() 不能在所有计算机上始终如一地工作
- mapbox - 如何在地图上动态显示标注?
- javascript - 使用电子和 reactjs 时设置 WebRTC 对等连接
- python - 使用图像作为键
- ruby-on-rails - 如果参数值为空/缺失,如何停止创建?