NativeBase 按钮​​不显示文本 [英] NativeBase Button doesn't show text

查看:61
本文介绍了NativeBase 按钮​​不显示文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have the issue that my buttons from NativeBase do not show their text. I pretty much used the sample code from the documentation of their website, but when I render it it shows three buttons that I can touch, but without any title. Any ideas? Please see code:

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:

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

推荐答案

刚刚删除了paddingTop"和paddingBottom"道具,文字开始出现.

Just deleted the "paddingTop" and "paddingBottom" props and the text started to appear.

这篇关于NativeBase 按钮​​不显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆