0

我想在我的文本输入中添加前缀，我想知道怎么做。

文本输入代码

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

我想要的最终输出

ve

4

4 回答 4

3

你可以这样做：

  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'
  }
})

在此处输入图像描述

于 2019-11-05T13:59:59.160 回答
2

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

<View>
  <Label />
  <TextInput />
<View>
于 2019-11-05T10:24:28.100 回答
1

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

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

于 2019-11-05T08:55:27.880 回答
1

您可以将两个文本输入组合起来。一个用于前缀，另一个用于输入文本。像这样：

<View>
  <TextInput /> // Text or dropdown pick, something else
  <TextInput />
<View>
于 2019-11-05T10:19:16.753 回答