时间戳

首页 > 解决方案 > android 中的文本降低和截断，但 ios 没有 - 反应原生

react-native - android 中的文本降低和截断，但 ios 没有 - 反应原生

问题描述

文字应该看起来像这样 IOS

但在 Android 上它看起来像这样： Android

文本和容器样式的代码是：

text: {
  fontFamily: 'Roboto',
  fontSize: 40,
  width: 250,
  height: 40,
  textAlignVertical: 'center',
  textAlign: 'center',
},
container: {
  backgroundColor: '#DDDDDD',
  width: 250,
  height: 55,
  margin: 12.5,
  borderRadius: 10,
  justifyContent: 'center'
}

和组件：

<TouchableOpacity
  style={styles.container}
  onPress={_ => this.navigation.push('Join')} >
  <Text style={styles.text}>Join</Text>
</TouchableOpacity>

<TouchableOpacity
  style={styles.container}
  onPress={_ => this.navigation.push('Create')} >
  <Text style={styles.text}>Create</Text>
</TouchableOpacity>

标签： react-native

解决方案

用这个替换你styles的：

text: {
    fontFamily: 'Roboto',
    fontSize: 40,
    textAlignVertical: 'center',
    textAlign: 'center',
  },
  container: {
    backgroundColor: '#DDDDDD',
    margin: 12.5,
    borderRadius: 10,
    justifyContent: 'center',
    alignSelf: 'center',
    width: 250,
  },

推荐阅读