NativeBase 按钮不显示文本

Question

我有一个问题，我的 NativeBase 按钮不显示它们的文本。我几乎使用了他们网站文档中的示例代码，但是当我渲染它时，它显示了三个我可以触摸的按钮，但没有任何标题。有任何想法吗？请看代码：

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from './MenuButton';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>Welcome to the App</Text>
        <MenuButton/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    top: 40,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle:{
   fontSize: 30
  }
});

MenuButton.js:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Container, Content, Button, Badge } from 'native-base';
export default class MenuButtons extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Button style={styles.button} textStyle={styles.buttonText}> HeLLO!! </Button>
                    <Button style={styles.button} bordered large> Info </Button>
                    <Button style={styles.button} bordered capitalize={true}> Primary </Button>
                </Content>
            </Container>
        );
    }
}

    const styles = StyleSheet.create({
    button: {
        backgroundColor: 'orange',
        paddingBottom: 30,
        paddingTop: 30,
        width: 350,
        height:40,
    },
    buttonText:{
        fontSize:40,
        color:'black'
    }
});

Answer 1

您必须用 <Text> 标签将文本包裹在 Button 开始和结束标签内，试试这个 link。 https://snack.expo.io/r1eDZ0wUX（已编辑 - 也从按钮中删除了填充样式）

<Button style={styles.button}><Text style={styles.buttonText}>HeLLO!!</Text></Button>
<Button style={styles.button} bordered large><Text>Info</Text></Button>
<Button style={styles.button} bordered><Text>Primary</Text></Button>

Answer 2

刚刚删除了 "paddingTop" 和 "paddingBottom" 道具，文本开始出现。

Answer 3

查看代码片段，您似乎没有按照文档进行操作。

Text 是从 native-base 导入的，而不是从 react-native

导入的

NativeBase 按钮不显示文本

NativeBase Button doesn't show text

javascript

react-native

native-base

NativeBase 按钮​​不显示文本

NativeBase Button doesn't show text

javascript

react-native

native-base

NativeBase 按钮不显示文本