web-dev-qa-db-ja.com

反応ネイティブでボタンテキストが中央に垂直に配置されていない

ボタンのテキストを垂直方向の中央に揃える際に1つの問題に直面していますが、正確な中央よりもわずかに低いままです。ドキュメントから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
  }
}

enter image description here

androidreactjsreact-nativestylestext-alignment
5
technerd

あなたはあなたのテキストにいくつかのスタイルを追加しようとするかもしれません。それはあなたがドキュメントから引用したその断片で実際に直接言及されています：

最良の結果を得るには、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
  }
}
0
Jason Gaare

これを試してみてください：

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

または、たとえば_<Text style={styles.example}>TEST</Text>_などのテキストにスタイルを追加してから、スタイルに追加することもできます。

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

多分これはあなたの参照に役立つことができます

0
Fathurifki Elvarianto Gamal