带有Flex尺寸的View内部按钮的文本被截断

Question

我是新手一般的反应本机和移动应用程序开发，我正在尝试为我的应用程序创建一个标题，其中包含Text和Button。

这是我的代码：

    import React from 'react';
    import { StyleSheet, Text, View, Button } from 'react-native';

    export default class App extends React.Component {

      _leaveSheet() {

      }

      render() {
        return (
          <View style={styles.container}>
            <View style={styles.header}>
              <Text allowFontScaling={false} style={styles.titleText}>YATHZEE</Text>
              <Button style={styles.leaveButton} title="Quitter" onPress={this._leaveSheet}/>
            </View>
            <View style={styles.body}></View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: 'column'
      },
      header: {
        flex: 1,
        backgroundColor: '#BDBDBD',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
      },
      body: {
        flex: 10,
        backgroundColor: 'white'
      },
      titleText: {
        // fontSize: 30,
        fontWeight: 'bold',
        backgroundColor: 'yellow',
        // alignSelf: 'center',
        flex: 1
      },
      leaveButton: {
        // alignSelf: 'center',
        // width: '100'
        flex: 2
      }
    });

所以我将带有flexDirection的标题放到行中，然后在我的View my Text和我的Button元素中添加了flex：1和flex：2，所以我期待这个结果：

Expected result

但相反，我有这个：Button中的文本被截断，我的按钮不占用他应该占用的空间。

Rendering on the mobile App (OP3 phone)

我尝试使用alignSelf属性和宽度，但似乎没有任何工作。

在Facebook按钮示例中，我可以看到Button可以定义Button的宽度，但我不知道如何使其工作。