如何在本机反应中将两个按钮放在同一行中?

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】:

&lt;/Text&gt; 之后将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 没有任何 空格ma​​rgin 只需复制粘贴

 <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>

希望对你有帮助。

【讨论】:

以上是关于如何在本机反应中将两个按钮放在同一行中?的主要内容,如果未能解决你的问题,请参考以下文章

如何在本机反应中将文本放置在图像上?

如何在本机反应中将设备的通知推送到另一台设备

如何在本机反应中将捕获的图像保存到应用程序文件夹?

如何在本机反应中将图像宽度设置为 100% 并将高度设置为自动?

如何在控制台的一行中将两个多行字符串放在一起?

如何以编程方式在eclipse中的同一行上制作两个按钮?