React Native - 按钮未显示

Question

我无法在 Android 模拟器上的 ReactNative 中显示我的自定义组件。具体来说，当它应该有一些高度时，它会显示为一条平线（高度接近 0 - 请参见“身份验证”下方的蓝线）。如何使按钮具有高度？见下文。谢谢！

这是我的代码：

App.js（与显示按钮相关的部分）

renderContent() {
        return (
          <Button onPress={() => firebase.auth().signOut()}>
            Log Out
          </Button>
        );
}

render() {
    return (
        <View>
            <Header headerText="Authentication"/>
            {this.renderContent()} //button is rendered here.
        </View>
    );
}

自定义按钮：

import React from 'react';

import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#007aff',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#007aff',
    marginLeft: 5,
    marginRight: 5
  }
};

export { Button };

Answer 1

您应该指定自定义按钮的高度。

    <View>
        <View>
        <Header headerText="Authentication"/>
        </View>
        <View style={{height:50}}>
        {this.renderContent()} //button is rendered here.
        </View>
    </View>

或者你可以使用 ScrollView 来代替。

    <View>
        <View>
        <Header headerText="Authentication"/>
        </View>
        <ScrollView>
        {this.renderContent()} //button is rendered here.
        </ScrollView>
    </View>