代码之家 › 专栏 › 技术社区 › technerd

按钮文本在react native中未垂直居中对齐

text-alignment styles react-native reactjs android

0

technerd · 技术社区 · 7 年前

我面临的一个问题是垂直居中对齐按钮,但它仍然略低于准确的中心。我发现了 includeFontPadding

字体在iOS设备中看起来很合适,但在Android上却没有正确居中。

https://facebook.github.io/react-native/docs/text-style-props#includefontpadding

设置为false可删除为某些升序/降序留出空间的额外字体填充。对于某些字体,这种填充可能会使文本在垂直居中时看起来稍微不对齐。为了获得最佳效果,还将textAlignVertical设置为居中。默认值为true。

<Button
    style={[style.button]} block >
     <Text>Setup Now</Text>
  </Button>

按钮样式:

export default {
  button: {
    elevation: null,
    shadowColor: null,
    shadowOffset: null,
    shadowOpacity: null,
    shadowRadius: null
  }
}

0 回复 | 直到 7 年前

1

4

Usman Kazmi 7 年前

而不是在按钮组件中使用文本组件。使用按钮文档中定义的属性“标题”:

https://facebook.github.io/react-native/docs/button.html

所以你可以

<Button
    style={[style.button]} title="Setup Now" block >
  </Button>

2

SagarDihora 7 年前

如果您使用的是react native default button,那么react native default button不支持样式属性,而且不支持在按钮组件中使用文本组件。使用官方文档中定义的属性“title”,请参阅下面的链接

https://facebook.github.io/react-native/docs/button.html

https://facebook.github.io/react-native/docs/handling-touches

请尝试下面的解决方案,可能对您的问题有所帮助。

<TouchableOpacity
      activeOpacity={.5}
      style={styles.buttonStyle}>
      <Text style={styles.textStyle}>Setup Now</Text>
</TouchableOpacity>



buttonStyle: {
    padding: 14,
    backgroundColor: 'red',
    borderRadius: 6,
  },

  textStyle: {
    color: 'white',
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 16,
  },

3

1

msmaromi 6 年前

试试看:

<Button style={{display: 'flex', justifyContent: 'center'}}>
   <Text>Setup Now</Text>
</Button>

4

0

Fathurifki Elvarianto Gamal 7 年前

或者可以在文本中添加样式 <Text style={styles.example}>TEST</Text> 然后加入你的风格

const styles = StyleSheet.create({ example: { text-align:'center', } })

5

0

Jason Gaare 7 年前

为了获得最佳效果,还将textAlignVertical设置为居中。

<Text style={[style.text]}>Setup now</Text>

export default {
  button: {
    ...
  },
  text: {
    flex: 1,   // fill the button
    textAlign: 'center',
    textAlignVertical: 'center',  // this style is Android only
  }
}