按鈕文本未在本機反應中垂直居中對齊

Question

我面臨着將按鈕的文本垂直居中對齊的一個問題，但它仍然比精確居中略低。 我從文檔中發現includeFontPadding建議與某些第三方字體存在一些差異。

字體在 iOS 設備中看起來不錯，但它沒有正確地以 Android 為中心。

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

設置為 false 以刪除旨在為某些上升/下降空間騰出空間的額外字體填充。 對於某些字體，當垂直居中時，這種填充會使文本看起來略微錯位。 為了獲得最佳結果，還將 textAlignVertical 設置為居中。 默認為真。

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

按鈕樣式：

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

Answer 1

而不是在按鈕組件中使用文本組件。 使用按鈕文檔中定義的道具“標題”：

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

所以你的代碼將是

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

Answer 2

如果您使用的是 react native 默認按鈕，則 react native 默認按鈕不支持樣式屬性，也不會在 Button 組件中使用 Text 組件。 使用官方文檔中定義的屬性“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,
  },

Answer 3

試試這個：

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

Answer 4

或者您可以在文本中添加樣式，例如<Text style={styles.example}>TEST</Text>然后添加到您的樣式中

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

也許這可以幫助您參考

Answer 5

您可以嘗試為文本添加一些樣式。 它實際上是在您從文檔中引用的那個片段中直接提到的：

為了獲得最佳結果，還將 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
  }
}