React Native跨平台鸿蒙开发实战系列：TextInput表单输入手机号功能

TextInput 是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置譬如自动完成、自动大小写、占位文字以及多种不同的键盘类型如纯数字键盘等等。React Native 的 TextInput 是用于文本输入的基础组件支持多种键盘类型和输入控制。最简单的用法就是丢一个TextInput到应用里然后订阅它的onChangeText事件来读取用户的输入。注意从 TextInput 里取值这就是目前唯一的做法也就是使用在onChangeText中用setState把用户的输入写入到 state 中然后在需要取值的地方从 this.state 中取出值。它还有一些其它的事件譬如onSubmitEditing和onFocus。核心特性基本属性‌onChangeText监听文本变化通过 setState 存储输入值onSubmitEditing提交文本时触发maxLength限制输入字符数placeholder占位文本提示平台差异处理‌-‌ Android‌默认有底部边框和 padding设置 padding: 0 可使样式与 iOS 一致‌- iOS‌父容器的 alignItems 可能失效需要额外处理常见问题解决方案‌键盘遮挡问题‌使用 KeyboardAvoidingView 组件自动处理键盘弹出时的布局调整KeyboardAvoidingView style{{flex:1}}behaviorpaddingkeyboardVerticalOffset{64}ScrollView style{{flex:1}}{/* 页面内容 */}/ScrollView/KeyboardAvoidingView中文输入字数限制‌直接使用 maxLength 在中文输入时会出现拼音字符被计入的问题建议通过 onChangeText 自定义字数验证逻辑。‌建议‌在开发表单页面时优先使用 KeyboardAvoidingView 包裹整个页面结构避免键盘遮挡输入框影响用户体验。有些属性仅在multiline为 true 或者为 false 的时候有效。此外当multilinefalse时为元素的某一个边添加边框样式例如borderBottomColorborderLeftWidth等将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput。importReactfromreact;import{View,Text,Dimensions,StyleSheet,Image,TextInput}fromreact-native;//获取屏幕的宽高constscreenWidthMath.round(Dimensions.get(window).width);constscreenHightMath.round(Dimensions.get(window).height);constAppStylesStyleSheet.create({wrap:{width:100%,height:screenHight,backgroundColor:#85BDFF},title:{width:100%,height:72,fontFamily:OPPOSans, OPPOSans,fontWeight:normal,paddingTop:50,fontSize:36,color:#304057,lineHeight:72,textAlign:center,fontStyle:normal},banner:{paddingTop:50,paddingRight:32,paddingLeft:32,},bannerItem:{paddingTop:10,display:flex,flexDirection:row,alignItems:center,justifyContent:center,width:50%,}})functionApp(){return(View style{AppStyles.wrap}Text style{AppStyles.title}鸿蒙ReactNative系统/TextView style{AppStyles.banner}View style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}实时业绩便捷查询/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}订单状态轻松把控/Text/View/ViewView style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}宣传数据全程管理/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}海量素材一站转发/Text/View/View/ViewImage style{{width:289,height:182,display:flex,alignSelf:center}}source{require(./images/login-bg.png)}/ImageViewTextInput style{{width:289,height:48,borderRadius:10,backgroundColor:#FFFFFF,paddingLeft:16,paddingRight:16,fontSize:14,color:#304057}}placeholder请输入手机号/TextInput/View/View);}exportdefaultApp;TextInput 是一个用于文本输入的基础组件具备 onChangeText 和 onSubmitEditing 属性。它允许用户输入文本并在输入变化和提交时触发相应的事件。这是一个在React Native应用中非常基础且常用的组件。TextInput 文本输入框React Native中的文本输入框使用和鸿蒙比较相近可能是因为 RN 首先封装鸿蒙端的缘故这点对鸿蒙开发者来说是个好消息TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用一些样式类的属性可以参照 View 的相关属性欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。