web-dev-qa-db-ja.com

Reactネイティブ-テンキーのみをキー入力する方法(句読点なし))

句読点なしでテンキーをキー入力する方法はありますか?

<TextInput keyboardType='numeric' ..... />

secureTextEntry={true}を使用すると、適切なキーボードが得られますが、値は*に置き換えられます。

だから、これは私が得ているものです: enter image description here

これは私が欲しいものです: enter image description here

7
Raheel Hasan

試しましたか number-pad?どちらも number-padnumericはiOSで動作します。

3
Karim Varela

私も同じ問題を抱えていました。

私はこのようなことを解決することができます:

keyboardType={Device.isAndroid ? "numeric" : "number-pad"}

そしてonChangeTextからのメソッド呼び出しでこれを行います:

const cleanNumber = number.replace(/[^0-9]/g, "");

this.setState({
  cleanNumber
});

そしてそれはTextInputの値の小道具です

value={this.state.cleanNumber}
2
Miguel Cardenas

キーボードから句読点を取り除くkeyboardTypeが提供されていないReactネイティブ。テキストから句読点を削除してkeyboardType = 'numeric'を設定するには、replaceメソッドで正規表現を使用する必要があります。

正規表現

/ [-#*;、。<> {} []\/]/gi

コード例

 onTextChanged(value) {
    // code to remove non-numeric characters from text
    this.setState({ number: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
  }

おやつリンクをご確認ください

https://snack.expo.io/@vishal7008/1e004c

1

keyboardType = {"number-pad"} Androidで動作します。注:私はreact-native-elementsからFormInputを使用しています。

1
Jithesh Kt