1

一般来说，我是 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 元素，所以我期待这个结果：

预期结果

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

在移动应用程序上渲染（OP3 手机）

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

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

4

1 回答 1

4

你必须包裹Button在一个 flex-edView中才能实现它。

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

从反应原生材料设计，

按钮组件呈现一个可触摸的按钮，并占用其父容器的整个宽度。

于 2017-11-23T07:28:09.353 回答