TextInput 只允许数字反应本机

Question

我使用 TextInput 只允许数字使用状态，它适用于 android 但不适用于 iOS。下面是我如何使用状态只允许数字。

handleInputChange = (text) => {

  if (/^\d+$/.test(text) || text === '') {
    this.setState({
      text: text
    });
  }
}

我的渲染方法

render = () => {
  return (
    <View style={{
      flex: 0,
      flexDirection: 'row',
        alignItems: 'flex-end',
        marginTop: 50
    }}>
      <View style={{ flex: 0, marginLeft: 10 }}>
        <Text style={{ fontSize: 20}}>$</Text>
      </View>
      <View style={{flex: 1,}}>
        <TextInput
          onChangeText={this.handleInputChange}
          value={this.state.text}
          underlineColorAndroid='transparent'
          autoCorrect={false}
          spellCheck={false}
          style={{ paddingLeft: 5, fontSize: 20 }} />
      </View>
    </View>
  );
}

这只适用于 Android，我猜是因为状态已经改变，反应不会更新 ui。

Answer 1

请试试这个：

keyboardType='numeric' 在标签 TextInput
当您证明不能用电脑键盘输入数字时，请使用模拟器键盘
如果还是不行就放这个textContentType='telephoneNumber'

Answer 2

正如 Ravi Rupareliya 所说，这是一个错误，当状态文本比当前 TextInput 值短时，TextInput 不会更新。似乎该错误已在 react-native 0.57.RC 中修复。现在我正在使用以下修复程序。

handleInputChange = (text) => {

    const filteredText = text.replace(/\D/gm, '');

    if(filteredText !== text) {
      // set state text to the current TextInput value, to trigger
      // TextInput update.
      this.setState({ text: text });

      // buys us some time until the above setState finish execution
      setTimeout(() => {

        this.setState((previousState) => {
          return {
            ...previousState,
            text: previousState.text.replace(/\D/gm, '')
          };
        });

      }, 0);
    } else {
      this.setState({ text: filteredText });
    }
}

Answer 3

React native 未提供从键盘删除标点符号的键盘类型。您需要使用带替换方法的正则表达式从文本中删除标点符号并设置 keyboardType = 'numeric'.

正则表达式

/[- #*;,.<>{}[]/]/gi

示例代码

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

请查看零食link

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

Answer 4

为我工作：

<TextInput 
   ...
   textContentType='telephoneNumber' 
   dataDetectorTypes='phoneNumber' 
   keyboardType='phone-pad'
/>

Answer 5

在获得用户输入的同时，您可以像这样更改特定文本输入框的键盘类型，即数字或字母等...

<TextInput>
  //contains some code
  keyboardType="Numeric"
</TextInput>

Answer 6

<TextInput>
  keyboardType="number-pad"
</TextInput>

TextInput 只允许数字反应本机

TextInput allow only numbers react native

react-native

expo