Reactjs reactnative中带有 flexbox的全宽按钮

我是flexbox新手，无法在react native中生成全宽按钮.一天多来，我一直在试图弄明白这一点，但在互联网上阅读了每一篇相关文章/帖子，但都无济于事.

我想有两个TextInput元素，跨越整个屏幕宽度，下面有一个按钮，也跨越整个屏幕宽度.TextInput个元素are横跨整个屏幕，但在我运行的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跨越整个屏幕吗？