在一个弹出对话框中,我希望将按钮放置在同一行上,但是现在我得到的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,
}
答案 0 :(得分:3)
在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>
您可以尝试此snack
答案 1 :(得分:2)
以全角尝试此操作,没有任何空格或边距 只需复制粘贴
<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>
答案 2 :(得分:1)
为此,我通常创建一个视图,将其flexDirection设置为'row'
并将按钮组件放入其中。因此,您的代码将如下所示:
<View style={{ flexDirection: 'row }}>
<Button title='Button 1'/>
<Button title='Button 2'/>
</View>
希望对您有帮助。