React-Native:使用自定义TextInput组件添加文本限制指示器
React-Native是一种基于React框架的移动应用开发框架，它允许开发者使用JavaScript编写跨平台的原生移动应用。React-Native的主要特点是可以同时开发iOS和Android应用，减少了开发者的工作量和学习成本。
自定义TextInput组件是React-Native中的一个重要组件，用于接收用户的输入。在添加文本限制指示器时，可以通过以下步骤实现：
- 导入TextInput组件：
- 导入TextInput组件：
- 创建一个自定义的TextInput组件，并设置相应的属性和样式：
- 创建一个自定义的TextInput组件，并设置相应的属性和样式：
- 在handleTextChange方法中处理文本变化事件，并根据需要更新文本限制指示器的状态：
- 在handleTextChange方法中处理文本变化事件，并根据需要更新文本限制指示器的状态：
- 根据文本限制指示器的状态，可以使用不同的方式向用户展示文本限制信息，例如使用文本颜色、字数统计等方式。
React-Native的优势包括：
- 跨平台开发：使用相同的代码库可以同时开发iOS和Android应用，减少了开发和维护的工作量。
- 原生性能：React-Native应用可以直接调用底层的原生API，获得接近原生应用的性能和用户体验。
- 热更新：React-Native支持热更新，可以在不重新发布应用的情况下更新应用的部分内容，提高了开发效率。
React-Native的应用场景包括但不限于：
- 移动应用开发：适用于需要同时在iOS和Android平台上发布的移动应用开发项目。
- 原生应用迁移：可以将已有的原生应用迁移到React-Native框架上，以减少开发和维护成本。
- 快速原型开发：React-Native提供了丰富的组件和开发工具，可以快速构建移动应用的原型。
腾讯云提供了一系列与React-Native相关的产品和服务，包括：
- 云开发：提供云函数、数据库、存储等服务，可以与React-Native结合使用，实现后端逻辑和数据存储。
- 移动推送：提供消息推送服务，可以用于向React-Native应用的用户发送推送通知。
- 移动直播：提供移动直播服务，可以用于在React-Native应用中集成实时音视频直播功能。
更多关于腾讯云相关产品和服务的信息，请参考腾讯云官方网站：腾讯云。
相关·内容
我有一个自定义TextInput组件的代码，我想将这个组件用于登录屏幕的用户名和密码值，但是，我不知道如何检索特定实例的文本输入的值。 import React from 'react';
import { TextInput, StyleSheet, View, ImagePropTypes } from 'react-native';
const TextInputCustom = (props) => {
const [value, onChangeText] = React.useState();
return (
<V
浏览 17提问于2020-09-30得票数 1
回答已采纳
我需要在输入输入时显示静态消息，或者如果用户关注react-native中的TextInput。 我需要显示输入字段必须包含以下字母。 我如何才能以浮动的方式显示在框下面，而不是在react-native的屏幕视图中 <TextInput>
underlineColorAndroid="transparent"
secureTextEntry={this.state.passwordDisplayed}
textContentType="password"
onChangeText={text => this.
浏览 20提问于2020-04-15得票数 0
我正在尝试学习原生的react。之前，我下载了一个样例项目，并提供了TextInput组件的以下代码 import React, { memo } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { TextInput as Input } from 'react-native-paper';
import { theme } from '../core/theme';
type Props = React.Componen
浏览 29提问于2021-04-28得票数 1
回答已采纳
当输入的文本到达第二行时，我正在尝试使我的TextInput变高。但是，当我的文本换行到第二行时(不使用换行符)，我不会收到事件。这会导致部分隐藏输入中的文本。 在文档中，除了onContentSizeChange之外，我找不到任何返回内容大小的事件。 我正在Android设备上测试。 我无法升级React-Native，我被0.58.1卡住了 class SomeComponent extends React.component
{
...
handleContentSizeChange = (event) => {
console.log('
浏览 19提问于2020-06-17得票数 0
回答已采纳
1回答
我正在尝试创建一个可重用的文本输入组件，但我想获取用户输入的值，以便在App.js上对其进行操作 TextInputComponent.js import React, {useState} from 'react';
import { StyleSheet, View, TextInput } from 'react-native'
const TextInputComponent = (props) => {
const [text, onChangeText] = useState("")
return (
浏览 15提问于2021-09-21得票数 0
我对本机开发的反应是新的。在我的应用程序中，我有登录页面，在这个登录页面中有两个文本输入。在这个文本中，输入没有加下划线。我已经尝试了很多方法，但没有得到下划线。这里我的要求是需要对inputtext加下划线。那么，如何得到这条下划线呢？
这是我的登录表单代码。
import React, {Component} from 'react';
import {StyleSheet, Text, View,TextInput,TouchableOpacity} from 'react-native';
export default class App extend
浏览 0提问于2018-09-27得票数 8
我试图添加样式到我的自定义组件在反应本机，但无论我做什么，风格没有任何影响。这是我的代码：
// App.js
import MyCustomComponent from './components/myCustomComponent.js';
render() {
return (
<View style={styles.container}>
<MyCustomComponent style={{marginTop: 10}}/>
</View>
);
}
该项目编译良好，我的自定义组件在屏幕上显示得
浏览 2提问于2019-04-15得票数 4
回答已采纳
我有一个要求，我想完全隐藏刷新控制的Android刷新指示器。我已经将大多数颜色属性设置为透明，仍然可以看到灰色的圆形指示器。有没有办法完全隐藏这个圆形指示器。关于正在发生的事情的gif链接：
这是我的代码：
import React, {Component} from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
FlatList,
Dimensions,
RefreshControl,
ToastAndroid,
} from 'react-native';
im
浏览 1提问于2017-05-08得票数 0
我正在开发一个反应本地应用程序，在这个应用程序中，我面临着TextInput的一个问题。
每当我按下键盘上的一个键，键盘就会关闭。
我尝试使用不同的文本输入组件，如材料文本输入和“反应-本机-元素”输入。然而，同样的问题也存在。
stackexchange上也有类似的问题，但它们都试图在TextInput中解决这个问题。然而，问题不在于TextInput，而在于TextInput的实现。
我已将守则简化为：
import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput } fr
浏览 5提问于2021-12-16得票数 1
我正在尝试制作一个具有两个TextInput的组件：
街道数
街道名称
我希望第一个有35的宽度，第二个横向填充剩余的空间。
你会怎么做？
我的代码：
import React from 'react';
import {StyleSheet, View} from 'react-native';
import FormInput from "./FormInput"
export default class NoStreetInput extends React.Component {
render() {
浏览 1提问于2018-11-24得票数 0
回答已采纳
我试图在Formik中使用创建的TextField组件，我创建了自己的TextField组件，名为Input，并导入到表单中，但我无法更改它的任何属性或调用它的方法，比如样式或onChangeText，例如，我试图在onChangeText中使用的任何方法都不起作用。这是我的代码，取自组件和公式。 下面是我的输入组件的代码和我将其导入到的表单： // Input Component
import React, { useState } from 'react';
import { TextInput, TextInputProps } from 'react-nati
浏览 14提问于2021-01-14得票数 1
回答已采纳
我试图在ios UITest中编辑TextInput React本机组件的文本。我已经将testID支柱添加到组件中。
两个问题：
testID支柱在本机ios代码中出现在哪里？
如何通过此TextInput选择testID并向其添加文本？
App.js
import React from "react";
import { StyleSheet, TextInput, View } from "react-native";
export default function App() {
return (
<View>
浏览 4提问于2020-05-01得票数 3
回答已采纳
我在试着做一张登记表。
我在组件目录下创建了一个名为Regform.js的文件。
我无法获取文本注册的边框底部
这是演示链接
请告诉我，我哪里做错了？
组件/Regform.js
import * as React from 'react';
import {
Text,
View,
StyleSheet,
TextInput,
TouchableOpacity
} from 'react-native';
export default class Regform extends React
浏览 0提问于2018-08-22得票数 40
回答已采纳
例如，我有一个库/包，它导出一些组件：
function SomeComponent() {
...
return (
<View>
...
<TextInput ... />
...
</View>
);
}
有没有什么办法我可以使用SomeComponent而不是TextInput，而是以某种方式注入我的自定义MyCustomTextInput？
我知道使用CustomTextInput prop创建SomeComponent是可能的(无论是像
浏览 29提问于2019-10-26得票数 0
我在我的应用程序的主页菜单中有一个TextInput，我已经更改了它的selectionColor，所以垂直条在我的配色方案中更明显。 <TextInput
//various settings
selectionColor={white}
//more settings
/> 随着应用程序的增长，我发现自己添加了越来越多的Textinput，每次我创建一个新的Textinput时，都要在每个Textinput中添加一行代码来将其选择颜色更改为白色，以便它们都匹配，这似乎是多余的。 我想知道有没有什么方法可以改变它，这样我就可以在每个文本输入中将selectionC
浏览 46提问于2018-02-22得票数 1
回答已采纳
我是react-native的新手。我刚刚创建了一个我想要的文本输入的可重用组件。我正在使用这个可重用的组件来创建一个视图。我在一个地方添加了4次可重用组件，在另一个地方添加了7次。
示例：
<Textinput
style={styles.textInput}
secureTextEntry={false}
textInputName={'USERNAME'}
showBottomBorder={true}
height={45}
onTextChange={this.onT
浏览 1提问于2016-04-25得票数 0
当secureTextEntry为真时，有没有办法在react-native中改变textInput的样式？我想在隐藏文本中显示星号(*)而不是点。
浏览 1提问于2018-06-04得票数 4
在multiline设置为false的情况下将文本添加到<TextInput>组件时，value文本与placeholder文本字体大小匹配，而如果multiline等于true，则value文本字体大小小于placeholder字体大小。
这是正常行为还是bug？
编辑：
/* @flow */
import React from 'react'
import Separator from './components/Separator'
import {Button, StyleSheet, TextInput, View} from
浏览 5提问于2017-07-07得票数 1
1回答
设置简单登录后，我尝试使用onPress={() => history.push('/Page')}链接到另一个组件
但在日志中显示：
找不到变量:历史
问题是:只要组件只有路由器和链接，就可以使用NativeRouter和路由器。但是，如果组件有其他东西，链接文本输入、文本等，则输入和文本会不断显示。
下面的例子，点击链接后登录组件和注册组件显示在同一屏幕上，甚至使用开关和精确。
所以唯一的方法似乎是利用历史。但在添加后显示
找不到变量:历史
有人能在这个反应路由器问题上给出一点提示吗？
谢谢
import React, { Component } fr
浏览 0提问于2018-07-04得票数 0
回答已采纳
我想构建一个组件，它接受一个Icon参数，并将所有其他参数传递给一个样式化组件Input (基于TextInput)。在Javascript中，这很简单： import React from 'react';
import { TextInput } from 'react-native';
import styled from 'styled-components/native';
const Input = styled.TextInput`
color: #268596;
`;
export default ({ Icon, ..
浏览 18提问于2021-05-07得票数 0
回答已采纳
我正在尝试创建一个基本的登录页面，但我不能在文本字段中写任何东西。这是一个login.js文件。我该如何解决这个问题呢？我是react-native的初学者。
import React ,{Component} from 'react';
import {View ,Text,ImageBackground,TouchableOpacity,TextInput} from 'react-native';
export default class Login extends Component
{
constructor(props)
浏览 0提问于2020-07-18得票数 0
如何通过单击按钮在React Native中添加文本输入？例如，我会按下"+“按钮，它会在视图的底部添加一个文本输入。
编辑:这是我的代码(删除了所有不相关的东西)。因为某些原因不能工作。单击该按钮不会执行任何操作。
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button,
TouchableHighlight, TouchableOpacity, S
浏览 0提问于2017-07-31得票数 1
我在使用堆栈导航器的react-native中有一个页面。当我点击TextInput时，它会获得焦点，几秒钟后就会自动失去焦点。这会自动隐藏键盘，从而中断我的文本输入。 当我将页面放在栈导航器的顶部时，它不会失去焦点，但当我再次将它放在某些页面的下方时，它又开始失去焦点。 Video Demo of Issue App.js const AppStackNavigator = createStackNavigator({
SplashScreen: {screen: SplashScreen},
Carousel: {screen: CarouselScreen},
Test:
浏览 22提问于2019-05-19得票数 0
我是新来的反应本地人，得到错误
不变冲突:文本字符串必须在文本组件中呈现。。
到目前为止，我还没有使用文本字符串，然后是文本框和按钮值，但是获取是错误的。
我正在分享下面的代码
import React from 'react';
import { StyleSheet, Text , View } from 'react-native';
import { TextInput , Button , Appbar} from 'react-native-paper';
class App extends React.Compone
浏览 0提问于2019-07-29得票数 0
回答已采纳
3回答
我正在创建一个待办事项应用程序，在该应用程序中，当单击按钮和单击按钮cancel时，需要显示对话框。我有两个组成部分：
AddTodo.js
import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { GetInfoDialog } from "./GetInfoDialog";
import { React, useState } from "react";
function useChange() {
const [s
浏览 13提问于2022-07-24得票数 0
回答已采纳
我正在学习react-native编程，我的下面的程序工作良好，如果我删除按钮，当我添加按钮时，它会给出一个错误。
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
StatusBar,
StyleSheet,
Text,
View,
TextInput,
Alert,
Button
} from 'react-native';
class TextInputDemo
浏览 1提问于2016-12-14得票数 0
我正在编写一个计时器应用程序，使用本机在安卓上的clojurescript (使用试剂，希望不重要)。
我有一个TextInput，在这里我接受用户的文本来命名计时器。每当我的计时器滴答滴答的时候，整个安卓应用程序就会重新呈现，而我就失去了对TextInput的关注。我目前正在使用onChangeText保存我正在键入的字符，是否有一种方法可以在计时器滴答作响时将注意力集中在文本输入上？
谢谢。
浏览 7提问于2015-12-09得票数 6
回答已采纳
我正在尝试开发一个使用的搜索应用程序。
<TextInput
placeholder="placeholder"
onBlur={() => console.log('blur')}
onFocus={() => console.log('focus')}
/>
在这段代码中，onFocus正在工作。但是，onBlur不起作用。
我认为“我点击了其他文本，所以onBlur事件将工作”，但，仍然集中。
如何操作onBlur事件？
我添加了我的代码
import { View, TextInput, Toucha
浏览 4提问于2022-10-16得票数 0
我在线程中遵循了所选的答案，但我无法理解。我想测试一个TextInput组件的值，这样我就可以检查它的长度了，现在实现这个目标的正确方法是什么？
我的组件看起来像这样：
import React, {useState, useEffect} from 'react';
import {TextInput} from 'react-native';
export default function TextInputComponent(props) {
const [text, setText] = useState('');
u
浏览 2提问于2020-07-13得票数 1
回答已采纳
我正在尝试将一个TextInput组件作为一个子组件，其中包含一个来自父组件的函数。
但是，我不能像往常一样输入文本(我必须在输入1条文本后设置光标)
你能告诉我如何解决这个问题吗？
提前谢谢你。
父组件
import React, { useState, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import TestListInputItem from "../components/TestListInputItem";
expor
浏览 5提问于2020-08-05得票数 1
回答已采纳
7回答
我正在为一个项目使用TextInput，并想禁用任何类型的文本选择或操作，如下面的屏幕截图中共享的(剪切/复制/粘贴/共享)。
我在react-native官方文档中找不到任何东西。
浏览 4提问于2017-03-19得票数 50
2回答
我正在尝试创建一个文本输入元素，但是即使我从入门页面复制了代码，它仍然会抛出错误，说“无法找到变量: TextInput”。
代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var AwesomeProject = Re
浏览 3提问于2015-07-02得票数 8
回答已采纳
我想将在TextInput中输入的值打印到控制台。
下面是我的代码片段：
constructor(props) {
super(props);
this.state= {
textValue: "",
}
}
_textChange = (text) => {
this.setState({
textValue: text,
})
console.log(this.state.textValue);
}
和：
&l
浏览 2提问于2021-01-09得票数 1
我希望在android react原生应用程序中更改文本颜色和占位符文本颜色：
render: function() {
return (
<View>
<TextInput
placeholder='Add Credit'
placeholderTextColor='ffffff'
textAlign='center'
/>
</View>
);
},
var styles = StyleSheet.create({
creditInput: {
浏览 0提问于2015-11-14得票数 6
回答已采纳
1回答
嘿，所以我尝试使用一个自定义的文本输入，并给它一些道具，比如autoCorrect，autoCapitalise等等，但是由于某些原因，它们不起作用，只有当我直接在从react原生模块导入的原始TextInput上使用它们时才能起作用。这是我的代码，我是如何做到这一点的。请帮我看看我哪里做错了或哪里做错了。 import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import AppTextInput from '../components/A
浏览 39提问于2021-08-23得票数 0
我们的项目要求我们使用另一个模式内的模式(我知道这很糟糕，但这不是我的决定:)，当文本输入在嵌套模式中时，它们似乎无法聚焦？
下面是一个非常简单的代码演示，当将它放在嵌套模式中时，代码不能集中在文本输入上。
import React, { useState } from "react";
import { Modal, StyleSheet, View, TextInput } from "react-native";
const App = () => {
const [text, setText] = useState('Some tex
浏览 9提问于2022-04-09得票数 1
回答已采纳
2回答
我试图使用onChangeText创建一个自定义输入组件，但是每当我开始在textInput框中输入时，都会出现一个错误。我已经检查了代码很多次了，在我看来一切都很好。
import React from "react";
import { TextInput, StyleSheet } from "react-native";
const defaultInput = props => (
<TextInput
underlineColorAndroid="transpar
浏览 1提问于2018-10-18得票数 0
虽然按下RoundButton组件不会发生任何事情，但是当我按回车键时，它会工作，
这是我的自定义按钮组件
自定义按钮
import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, } from 'react-native';
export const RoundedButton = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return( <Touchabl
浏览 1提问于2021-07-12得票数 4
回答已采纳
1回答
调用钩子中另一个类的方法
、、、
大家好，我有一个关于反应本土化的问题。( 1)我如何在钩子中调用另一个类？例如，如果我有：
import React, { Component, useEffect, useState} from 'react';
import { TextInput } from 'react-native-paper';
import { View,Text} from 'react-native';
import Utils from './Utils';
export default function Userprofile() {
浏览 9提问于2022-09-04得票数 0
回答已采纳
我有<TextInput/>，我想在<TextInput/>之外点击的时候模糊它并切换键盘，我已经尝试过解决方案，但没有任何运气。
import React, { Component } from 'react'; import { AppRegistry, Dimensions, StyleSheet, Text, TouchableHighlight, View, Image, TextInput, ScrollView, Keyboard, TouchableWithoutFeedback } from 'react-native'
浏览 1提问于2018-05-07得票数 2
回答已采纳
2回答
因为我正在构建我的第一个React应用程序，特别是react-native应用程序。我想把一个文本框值从一个js文件传递到另一个文件。有没有人能告诉我该怎么做？
我在first.js中的代码
<Text style={{ color: 'black', fontSize: 20, textAlign: 'left', width: width - 60 }}>{GLOBAL.Email}</Text>
<View style={[styles.textI
浏览 0提问于2018-09-11得票数 0
? 当文本溢出时，有没有办法覆盖在TextInput末尾放置省略号的iOS默认行为？我希望能够看到的是文本被截断之前的最后一个字符。 你可以用任何TextInput重现它。下面是一些示例代码： import React, { Component } from 'react';
import { TextInput } from 'react-native';
export default function UselessTextInput() {
const [value, onChangeText] = React.useState(&#
浏览 53提问于2019-09-20得票数 0
3回答
今天我试着用原生react编写代码，并试着写一个程序，里面有一个按钮和一个文本，每次按下都会改变：
import { Text, View, StyleSheet, TouchableOpacity, Button, TextInput } from 'react-native';
import Constants from 'expo-constants';
export default () => {
const onButton = () =>
{
myResult(10);
}
return (
<Text>Hel
浏览 1提问于2021-01-07得票数 2
1回答
我是新的反应本机，并试图制作一个小的用户输入表单，但我的代码工作不太好。
我创建了一个类，它将创建标签和文本输入，但样式不适用于我的类Form1。同一文件App.js中的类工作正常，但从另一个js文件导入却没有工作。
有人能帮我找出解决办法吗?为什么会发生？
App.js
import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, TextInput } from
浏览 5提问于2022-06-19得票数 0
1回答
大家好，我正在努力学习ReactJS，我想知道为什么每个人都在使用标记来构建表单。
我是说当我使用这个代码时：
import { TextInput, Form, View } from 'react-native'
<Form onSubmit={this.onSubmit}>
<TextInput/>
</Form>
我发现了一个错误：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件。
或者当我使用这个代码时：
impo
浏览 1提问于2017-09-12得票数 0
回答已采纳
我定义了属性_navigateToRegister，但当我按下按钮时，什么也没有发生。我还有这个错误警告:警告:失败的道具类型道具"onPress“在”按钮“中被标记为”required“，但它的值是"undefined”错误在哪里？
app.js
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
impor
浏览 1提问于2018-06-14得票数 0
我不明白怎么才能得到道具。我按照文档的建议使用了formValueSelector，但不起作用。我的错误在哪里？我在使用最新版本的redux表单。
LoginForm.js
'use strict';
import React from 'react';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { TextInput, View, TouchableHighlight, Text } from 'react-native';
浏览 5提问于2016-08-31得票数 0
回答已采纳
这是我的密码。它只是一个简单的测试屏幕。导航是在两个屏幕上完成的。我是初学者，所以我对redux不熟悉。我希望当用户在第二个屏幕上输入文本时，当用户从第二个屏幕切换到第一个屏幕时，相同的文本将以用户名的形式出现在第一个屏幕上。请帮帮我。谢谢，
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class FirstScreen extends Component {
constructor(props) {
浏览 1提问于2019-10-31得票数 0
我在react-native中有项目，它是ok的，我的问题是当我尝试导入另一个组件时它失败了，但是当在index.android.js导入它时它ok为什么?？
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
ToastAndroid,
ListView,
Navigator,
} from 'react-nat
浏览 0提问于2016-11-28得票数 1
我有一个带清除按钮的TextInput (clearButtonMode属性设置为'always')：
<TextInput
style={styles.textInputStyle}
onChangeText={text => this.SearchFilterFunction(text)}
underlineColorAndroid="transparent"
placeholder="Search Here"
cle
浏览 3提问于2020-05-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
