1. ホーム
  2. react-native

[解決済み】react nativeでボタンを無効化する。

2022-04-14 09:14:54

質問

react nativeを使ってandroidアプリを作っているのですが、TouchableOpacityコンポーネントを使ってボタンを作りました。

ユーザーからテキストを受け取るためにテキスト入力コンポーネントを使用し、ボタンは以下のようにします。 のみが有効です。 テキスト入力が特定の文字列に一致したら

最初にTouchableOpactiyラッパーなしでボタンをレンダリングし、入力文字列が一致したらラッパーで再レンダリングする方法を考えることができます。

でも、もっといい方法があるんじゃないかと思うんです。どなたか教えてください。

解決方法は?

TouchableOpacity エクステント TouchableWithoutFeedback を使用すればよいので disabled プロパティを使用します。

<TouchableOpacity disabled={true}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

React Native TouchableWithoutFeedback #disabled ドキュメント

新しい プレス可能 APIには disabled というオプションもあります。

<Pressable disable={true}>
  {({ pressed }) => (
    <Text>I'm disabled</Text>
  )}
</Pressable>