带有 Flex 尺寸的视图内的按钮被截断了他的文本答案

【问题标题】：Button inside View with Flex dimensions has his text truncated带有 Flex 尺寸的视图内的按钮被截断了他的文本
【发布时间】：2018-05-06 23:04:16
【问题描述】：

一般来说，我是 react-native 和移动应用程序开发的新手，我正在尝试为我的应用程序创建一个标题，其中包含一个文本和一个按钮。

这是我的代码：

    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 的标题放在行中，并在我的视图中添加了我的文本和带有 flex: 1 和 flex: 2 的 Button 元素，所以我期待这个结果：

Expected result

但是我有这个：按钮内的文本被截断，我的按钮没有占用他应该占用的空间。

Rendering on the mobile App (OP3 phone)

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

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

【问题讨论】：

标签： reactjs react-native flexbox react-native-android react-native-flexbox

【解决方案1】：

您必须将 Button 包裹在一个 flex-ed View 中才能实现。

<View style={styles.leaveButton}>
   <Button title="Quitter" onPress={this._leaveSheet} />
</View>

来自react-native material design，

按钮组件呈现一个可触摸的按钮，消耗 full 其父容器的宽度。

【讨论】：