React Native按钮文本在发布APK中消失

时间:2018-04-13 14:05:15

标签: android css react-native

在我的调试APK上,我的按钮上的文字显示正常,但是当我创建发布APK并在与我调试时完全相同的手机上运行...调试中的按钮上显示的文本没有&# 39; t出现在APK中。

我正在使用5'三星进行调试和测试。我不知道问题是什么,考虑到我在发布版本和调试版本之间没有改变任何东西。而且我不认为造型会受到影响。任何想法是什么问题?即使在调试版本中显示,我的字体大小是否太大?

以下是我使用的按钮的代码:

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

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

在主屏幕组件中,这些按钮实例:

<View style={styles.container}>
        <Image
          style= {styles.background}
          source = {require('../FinalSlices/Slices/signin/splashbackground.jpg')}
          />
        {/*<Image source = {require('./FinalSlices/Slices/home/banner.png')} style = {styles.bannerImage}/>*/}
        <View>
          <View style={styles.top} >
            <Image source = {require('../FinalSlices/Slices/signin/logo.png')} style = {styles.logo}/>
          </View>

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

          </View>
        </View>

      </View>

这些是相关的CSS样式:

bottom: {
      flex: 1,
      marginTop:20,
      alignItems: 'center',
      justifyContent: 'center',
    },
    button1: {

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

0 个答案:

没有答案