React Native的TextInput组件占位符(placeholder)无法改样式怎么办?

React Native的TextInput组件是一种允许用户输入文本的基础组件,广泛应用于各种需要用户输入的场景,如登录表单、搜索框、评论区域等。它非常灵活,支持多种属性来自定义其外观和行为。

主要思路:使用Text组件展示文本,代替占位符。定位到输入框,通过onFocus和onBlur修改Text的内容 展示。 这里简单介绍几个他的用法。

onChangeText

当前只有一种方法可以拿到组件内的输入内容text,就是通过onChangeText,当我们使用

<TextInput/>这个组件时,我们可以这样使用

html 复制代码
<TextInput
    onChangeText={text =>{
        console.log("text");
    }}
/>
可以打印出你在输入框的实时内容

要想实现vue的双向绑定的效果就需要使用到hook钩子配合使用。当然也需要value。

onFocus

当输入框被聚焦的时候就触发这个方法,我认为可以在这里面写上一些动画。不过值得一提就是react native的动画比css的复杂许多。新手还是不要急。

这个函数能在这篇文章帮助我们干什么呢? 当然就是让占位符消失。不然我写这个干什么,官方文档什么都有,但是谁遇到一些问题就直接查文档。都不会用查了也不会。

onBlur

当输入框失去焦点会触发这个函数,我们用来干嘛?失去焦点咱们就将占位符加上。什么时候加上后面说。

style

这个样式是无法定义到我们的占位符的,不要想,官方还没有给出简单的方法帮助我们去控制占位符。 只有一个内联可以修改占位符样式,那就是placeholderTextColor,只能控制颜色

使用

说了这些方法你是不是已经有了思路,当然,不难。

准备一下:

我们要用到两个输入框,就需要两个TextInput组件。验证码和手机号。

定义占位符的内容

js 复制代码
//我们用useState的对象控制要在两个输入框里展示的不同占位符。
  const [placeholdertext,setPlaceholdertext] = useState({
    placeholder1: '请输入手机号码',
    placeholder2: '请输入6位数验证码',
  });

写好两个TextInput

js 复制代码
<TextInput         
     onFocus={() => updatePlaceholder1('')}
     onBlur={() => handlePlaceholderPhone()}
/>

<TextInput
    onFocus={() => updatePlaceholder2('')}
    onBlur={() => handlePlaceholderText()}
/>

这样够简单了吧,updatePlaceholderhandlePlaceholder这两个差不多的函数我就不写了,里面的逻辑具体该怎么实现还得看需求,我还要上班,拜拜。

哦,对了。Text组件就分别写在两个输入框组件的上方或者下方,或者你用View包裹一下。

我为什么要写这个东西?用placeholder就已经够用了。主要还是满足不了产品。写这个就是为了满足需求。

相关推荐
Jinuss14 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海14 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手15 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪18 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪20 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__21 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工25 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主26 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat28 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee33 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能