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

您必须在Button的打开和关闭标签内用<Text>标签包裹文本，请尝试使用此链接。 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按钮不显示文本

3 个答案: