React Native:文字从较小屏幕上的按钮中消失

时间:2018-02-10 15:05:49

标签: android react-native styling

我正在创建一个反应原生的手机应用程序。我已经在5'屏幕上的模拟器,它一直工作正常。我尝试在真实手机上的小屏幕上进行测试,文本从按钮上消失。单击按钮时,文本将再次以正确的大小显示。关于如何处理的任何建议?

我是否根据屏幕尺寸调整文字大小?

这是我的代码:

    class CreateAccountButton extends Component {
  constructor(props) {
    super(props)
    this.props.label = ""
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
         style={styles.button2}
         onPress={this.props.onPress}
        >
         <Text style = {{fontSize: 20, color:'white',}} > {this.props.label} </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

button2: {
        backgroundColor: '#24572c',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 15,
        borderWidth: 1,
        borderColor: 'white',
        width: 250,
        height: 50,
    },

这是在代码中调用组件的地方。

<View style={styles.spacer}>
                <LoginButton label='Sign In' onPress={this._onLoginPress.bind(this)} />
                <CreateAccountButton label= 'Create Account' onPress={this._onCreateAccountPress.bind(this)} />
          </View>

spacer: {
        flex: 1,
        // backgroundColor: 'pink',
    },

这方面的一个新发展是,在调试版本中,当我在手机上运行时,文本显示在按钮上,但在发布版本上,文本不会出现。我仍然无法弄清问题是什么。

0 个答案:

没有答案