react-native中带有/ flexbox的全宽按钮

Posted 2023-03-07

【中文标题】react-native中带有/ flexbox的全宽按钮

【英文标题】：Full width button w/ flex-box in react-native

【发布时间】：2016-03-04 20:24:59

【问题描述】：

我是 flexbox 的新手，无法在 react-native 中生成全宽按钮。一天多来，我一直试图自己弄清楚这一点，并且阅读了互联网上的所有相关文章/帖子，但无济于事。

我想要两个跨越整个屏幕宽度的TextInput 元素，在它们下方有一个也跨越整个屏幕宽度的按钮。 TextInput 元素 跨越了整个屏幕宽度，但这似乎是我正在运行的 android 模拟器的默认设置。

这是我的代码：

 var MyModule = React.createClass(
render: function() 
    return (
        <View style=styles.container>
            <View style=styles.headline>
                <Text>Hello World</Text>
            </View>

            <View style=styles.inputsContainer>
                <TextInput style=[styles.input] placeholder="Email" />
                <TextInput
                    secureTextEntry=true
                    style=[styles.input]
                    placeholder="Password"
                />
                <TouchableHighlight
                    style=styles.fullWidthButton
                    onPress=this.buttonPressed
                >
                    <Text>Submit</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
,
buttonPressed: function() 
    console.log("button was pressed!");

);

var paddingLeft = 15;

var styles = StyleSheet.create(
inputsContainer: 
    // Intentionally blank because I've tried everything & I'm clueless
,
fullWidthButton: 
    // Intentionally blank because I've tried everything & I'm clueless
,
input: 
    paddingLeft: paddingLeft,
    height: 40,
    borderColor: "black",
    backgroundColor: "white"
,
container: 
    flex: 1,
    backgroundColor: "#f0f0f0",
    alignItems: "stretch"
,
headline: 
);

module.exports = Onboarding;

有人知道我需要做什么才能让TouchableHighlight 跨越屏幕的整个宽度吗？

【参考方案1】：

我来这里是为了寻找同样的问题。经过进一步实验，我发现最简单的方法是使用alignSelf: 'stretch'。这会强制单个元素占据可用的全部宽度，例如

 button: 
    alignSelf: 'stretch'
 

Nader 的回答当然有效，但这似乎是使用 Flexbox 的正确方法。

【讨论】：

on alignSelf:'stretch' 不起作用，但它适用于 Touchables

@Pankaj，如果你用带有 flex 的 View 包装它，它只会在 <Button> 上对我有用：1. <View style= flex: 1 ><Button style= alignSelf: 'stretch' /> </View>

哇，你为我节省了数小时的调查时间，谢谢伙计

【参考方案2】：

您可以通过在 TouchableHighlight 的父元素上设置 flex:1 属性，然后将 flexDirection:row 属性分配给 TouchableHighlight 元素来实现：

<View style=styles.inputsContainer>
    <TouchableHighlight style=styles.fullWidthButton onPress=this.buttonPressed>
        <Text style=styles.fullWidthButtonText>Submit</Text>
    </TouchableHighlight>
</View>

  inputsContainer: 
    flex: 1
  ,
  fullWidthButton: 
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  ,
  fullWidthButtonText: 
    fontSize:24,
    color: 'white'
  

我已经建立了一个完整的工作示例here。另外，完整的代码如下。

https://rnplay.org/apps/J6fnqg

'use strict';

var React = require('react-native');
var 
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
 = React;

var MyModule = React.createClass(
  render: function() 
    return <View style=styles.container>

      <View style=styles.headline>
        <Text>Hello World</Text>
      </View>

      <View style=styles.inputsContainer>

        <TextInput style=[styles.input] placeholder="Email" />
        <TextInput secureTextEntry=true style=[styles.input] placeholder="Password" />
        <TouchableHighlight style=styles.fullWidthButton onPress=this.buttonPressed>
          <Text style=styles.fullWidthButtonText>Submit</Text>
        </TouchableHighlight>

      </View>
    </View>
  ,
  buttonPressed: function() 
    console.log('button was pressed!');
  
);

var paddingLeft = 15;


var styles = StyleSheet.create(
  inputsContainer: 
    flex: 1
  ,
  fullWidthButton: 
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  ,
  fullWidthButtonText: 
    fontSize:24,
    color: 'white'
  ,
  input: 
    paddingLeft: paddingLeft,
    height: 40,
    borderColor: 'black',
    backgroundColor: 'white',
  ,
  container: 
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'stretch',
  ,
  headline: 
  
);



AppRegistry.registerComponent('MyModule', () => MyModule);

【讨论】：

非常感谢您的回复。不幸的是，这不适用于在 Android 6.0 中运行的 react-native 0.15.0（并且 Android 模拟器在您提供的操场上已损坏）。我复制粘贴了您的确切文件，按钮显示与以前一样（它只是其文本的宽度）。这是一个 React 错误吗？

也许试试这个： var windowWidth = Dimensions.get('window').width; 另外，更新了示例来实现这一点。

alignItems: 'stretch' on the container 对我来说是缺少的关键，以防万一有人进行了建议的更改并且仍然遇到问题。

【参考方案3】：

现在有一个预定义的组件按钮。即使使用文字，也需要注意View的宽度：

<View style=[width:"100%"]>
    <Button
        onPress=this.closeModal
        title="Close"
        color="#841584"
        style=[borderRadius: 5,]
        hardwareAccelerated
    />
</View> 

【参考方案4】：

提供的解决方案对我不起作用。您必须将 Buttons 包装在一个额外的 View 组件中：

<View style=flexDirection: "row">
    <View style = flex: 1>
        <Button title="Button 1" />
    </View>
    <View style = flex: 1>
       <Button title="Button 2" />
    </View>
</View>

或将Text 组件与TouchableOpacity 一起使用：

<View style= flexDirection: "row">
    <TouchableOpacity style = width: "50%">
        <Text style=textAlign:"center" > Button 1 </Text>
    </TouchableOpacity>
    <TouchableOpacity style = width: "50%">
        <Text style=textAlign:"center" > Button 1 </Text>
    </TouchableOpacity>
</View>

在此处尝试两种解决方案：https://snack.expo.io/wAENhUQrp

justifyContent: 'space-between' 不会为按钮使用所有可用空间 button alignSelf: 'stretch' 不适用于 Button 组件

【参考方案5】：

让我们使用以下有助于设置按钮宽度和高度的源代码。这里需要在视图布局中指定按钮的宽度和高度参数。

<View style=[ width: "90%", margin: 10, backgroundColor: "red" ]>
   <Button
      onPress=this.buttonClickListener
      title="Button Three"
      color="#90A4AE"
    />
</View>

【参考方案6】：

你可以使用：

alignItems: 'center',
width: '100%',

示例：

<View style=styles.container>
   <Button style=styles.button />
</View>

const styles = StyleSheet.create(
  container: 
    alignItems: 'center',
    width: '100%',
  ,
  button: 
    alignSelf: 'stretch',
  ,
)