React Native Buttons无法在flexbox中呈现

Question

以下示例遵循Relex-Native在Flexbox布局和按钮组件上提供的文档。我试图渲染一个在屏幕上均匀分布的垂直按钮列表。

'use strict';
 import React, { Component } from "react";
import { Alert, Button, StyleSheet, Text, View } from "react-native";

class ClickerQuestion extends Component {
_handlePress(btnValue) {
    Alert.alert('Thanks, button "' + btnValue + '" has been pressed!');
}

render() {
    return (
        <View
            style={{
                flex: 1,
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center"
            }}
        >
            <Button
                onPress={() => this._handlePress("B")}
                title="A"
                color="#214231"
            />

            <Button
                onPress={() => this._handlePress("B")}
                title="B"
                color="#214231"
            />

            <Button
                onPress={() => this._handlePress("C")}
                title="C"
                color="#214231"
            />

            <Button
                onPress={() => this._handlePress("D")}
                title="D"
                color="#214231"
            />

            <Button
                onPress={() => this._handlePress("E")}
                title="E"
                color="#214231"
            />
        </View>
    );
}
}

不幸的是，此示例仅呈现空白屏幕。如果我恢复到CSS中的静态像素值，我可以正确渲染页面。使用Flexbox进行响应式设计是理想的，所以如果我在上面的示例中遗漏了某些内容，请告诉我。

'use strict';
 import React, { Component } from "react";
 import { Alert, Button, StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
container: {
    margin: 60
},
text: {
    height: 30,
    fontSize: 25,
    padding: 5
}
});

class ClickerQuestion extends Component {
_handlePress(btnValue) {
    Alert.alert('Thanks, button "' + btnValue + '" has been pressed!');
}

render() {
    return (
        <View style={styles.container}>
            <Text style={styles.text} />
            <Button
                onPress={() => this._handlePress("A")}
                title="A"
                color="#214231"
            />

            <Text style={styles.text} />
            <Button
                onPress={() => this._handlePress("B")}
                title="B"
                color="#214231"
            />

            <Text style={styles.text} />
            <Button
                onPress={() => this._handlePress("C")}
                title="C"
                color="#214231"
            />

            <Text style={styles.text} />
            <Button
                onPress={() => this._handlePress("D")}
                title="D"
                color="#214231"
            />

            <Text style={styles.text} />
            <Button
                onPress={() => this._handlePress("E")}
                title="E"
                color="#214231"
            />
        </View>
    );
}
}