具有 Flex 尺寸的视图内的按钮的文本被截断

Question

我是 react-native 和一般移动应用程序开发的新手，我正在尝试为我的应用程序创建一个 header，里面有一个文本和一个按钮。

这是我的代码：

    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
      }
    });

所以我将我的 header 和 flexDirection 放在行中，然后在我的视图中添加我的文本和我的带有 flex: 1 和 flex: 2 的 Button 元素，所以我期待这个结果：

Expected result

但我有这个：按钮内的文本被截断，我的按钮没有采用他应该采用的 space。

Rendering on the mobile App (OP3 phone)

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

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

Answer 1

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

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

来自 react-native material design,

The button component renders a touchable button with consumes the full width of it's parent container.

具有 Flex 尺寸的视图内的按钮的文本被截断

Button inside View with Flex dimensions has his text truncated

flexbox

reactjs

react-native

react-native-android

react-native-flexbox