如何在TextInout中添加前缀-React Native

我想在文本输入中添加前缀,我想知道如何做。

文本输入代码

        <TextInput
          style={styles.inputs}
          placeholder="Mobile Number"
          keyboardType="number-pad"
          underlineColorAndroid="transparent"
          onChangeText={mobile_number => this.setState({mobile_number})}
        />

我想要的最终输出

如何在TextInout中添加前缀-React Native

cheater_911 回答:如何在TextInout中添加前缀-React Native

您可以使用文本掩码。尝试这个 https://github.com/react-native-community/react-native-text-input-mask

处理电话号码输入 https://www.npmjs.com/package/react-phone-number-input

,

您可以将两个textinput组合在一起。一个用于前缀,另一个用于输入文本。 像这样:

.info-tooltip .tooltip-inner {
  max-width: 340px;
  text-align: left;
  background-color: #fff;
  color: #000;
  border-radius: 30px;
  box-shadow: 0 0 3px #00000040;
}
,

如果您不希望前缀可编辑,请使用标签:

<View>
  <Label />
  <TextInput />
<View>
,

您可以这样做:

  render() {
    return (
      <View style={styles.inputContainer}>
        <Text style={styles.prefix}>+94</Text>
        <TextInput
          placeholder="Mobile Number"
          keyboardType="number-pad"
          underlineColorAndroid="transparent"
          onChangeText={mobile_number => this.setState({ mobile_number })}
        />
      </View>
    )
  }
const styles = StyleSheet.create({
  inputContainer: {
    borderWidth: 1,flexDirection: 'row',alignItems: 'center',backgroundColor: 'white',marginHorizontal: 10,borderRadius: 10
  },prefix: {
    paddingHorizontal: 10,fontWeight: 'bold',color: 'black'
  }
})

enter image description here

本文链接:https://www.f2er.com/3161146.html

大家都在问