メインコンテンツへスキップ

Button

あらゆるプラットフォームできれいにレンダリングされる基本的なボタンコンポーネントです。最小限のカスタマイズをサポートしています。

このボタンがあなたのアプリに合わない場合は、Pressable を使って独自のボタンを構築できます。参考として、Buttonコンポーネントのソースコードをご覧ください。

tsx
<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

使用例​

リファレンス

Props​

必須
onPress​

ユーザーがボタンをタップしたときに呼び出されるハンドラです。

型
({nativeEvent: PressEvent})

必須
title​

ボタンの内部に表示するテキストです。Androidでは、指定されたタイトルは大文字に変換されます。

型
string

accessibilityLabel​

視覚障害者向けのアクセシビリティ機能で表示するテキストです。

型
string

accessibilityLanguage
iOS
​

ユーザーが要素を操作する際にスクリーンリーダーが使用すべき言語を示す値です。BCP 47仕様に従う必要があります。

詳細はiOSの `accessibilityLanguage` ドキュメントを参照してください。

型
string

accessibilityActions​

アクセシビリティアクションを使用すると、支援技術がコンポーネントのアクションをプログラムで呼び出すことができます。accessibilityActionsプロパティには、アクションオブジェクトのリストを含める必要があります。各アクションオブジェクトには、フィールド名とラベルを含める必要があります。

詳細はアクセシビリティガイドを参照してください。

型必須
arrayNo

onAccessibilityAction​

ユーザーがアクセシビリティアクションを実行したときに呼び出されます。この関数への唯一の引数は、実行するアクションの名前を含むイベントです。

詳細はアクセシビリティガイドを参照してください。

型必須
functionNo

color​

テキストの色 (iOS)、またはボタンの背景色 (Android)。

型デフォルト
color '#2196F3'
Android
'#007AFF'
iOS

disabled​

true の場合、このコンポーネントのすべてのインタラクションを無効にします。

型デフォルト
boolfalse

hasTVPreferredFocus
TV
​

TVの優先フォーカスです。

型デフォルト
boolfalse

nextFocusDown
Android
TV
​

ユーザーが下に移動したときに次にフォーカスを受け取るビューを指定します。Androidのドキュメントを参照してください。

型
number

nextFocusForward
Android
TV
​

ユーザーが前方に移動したときに次にフォーカスを受け取るビューを指定します。Androidのドキュメントを参照してください。

型
number

nextFocusLeft
Android
TV
​

ユーザーが左に移動したときに次にフォーカスを受け取るビューを指定します。Androidのドキュメントを参照してください。

型
number

nextFocusRight
Android
TV
​

ユーザーが右に移動したときに次にフォーカスを受け取るビューを指定します。Androidのドキュメントを参照してください。

型
number

nextFocusUp
Android
TV
​

ユーザーが上に移動したときに次にフォーカスを受け取るビューを指定します。Androidのドキュメントを参照してください。

型
number

testID​

E2Eテストでこのビューを特定するために使用されます。

型
string

touchSoundDisabled
Android
​

true の場合、タッチ時にシステムサウンドを再生しません。

型デフォルト
booleanfalse