reactjs - 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 的正确方法。