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

Question

我是 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 跨越屏幕的整个宽度吗？

Answer 1

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

 button: {
    alignSelf: 'stretch'
 }

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

Answer 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);

Answer 3

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

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

Answer 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 组件

Answer 5

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

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

Answer 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',
  },
})