您可以使用文本掩码。尝试这个
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'
}
})
本文链接:https://www.f2er.com/3161146.html