如何在输入TextInput React Native时隐藏标签
在React Native中，要实现在输入TextInput时隐藏标签，可以通过以下步骤进行操作：
- 导入所需的React Native组件：
import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';- 创建一个函数组件，并在组件内部定义一个状态变量来控制标签的显示与隐藏：
const HideLabelExample = () => {
const [text, setText] = useState('');
const [isLabelVisible, setLabelVisible] = useState(true);
const handleInputChange = (inputText) => {
setText(inputText);
setLabelVisible(inputText === '');
};
return (
<View>
{isLabelVisible && <Text>标签</Text>}
<TextInput
value={text}
onChangeText={handleInputChange}
/>
</View>
);
};- 在组件内部使用TextInput组件，并根据输入文本的变化来控制标签的显示与隐藏。当输入文本为空时，显示标签，否则隐藏标签。
以上代码示例中，通过useState钩子函数来创建了两个状态变量，text用于保存输入的文本，isLabelVisible用于控制标签的显示与隐藏。在handleInputChange函数中，通过setText来更新输入文本的值，并通过setLabelVisible来根据文本是否为空来决定标签的显示与隐藏。在组件的返回值中，使用条件渲染来控制标签的显示，当isLabelVisible为true时，显示标签。
请注意，此示例中没有提及任何与特定品牌商有关的产品或链接，如有需要，请自行根据需求和平台选择适合的产品和服务。
相关·内容
我试图创建一个简单的、标准的聊天窗口，就像WhatsApp、Telegram等。当屏幕底部的输入盒获得焦点时，键盘就会出现，而输入框就像这样在键盘上转过来……
这是我的密码..。
import React from 'react'
import {Actions} from 'react-native-router-flux'
import {ScrollView, View, TextInput, Text} from 'react-native'
import style from './style'
class
浏览 3提问于2018-06-01得票数 0
回答已采纳
5回答
我将react-native与react-native-paper结合使用。
我有以下代码：
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
export default class Header extends Component {
state = {
text: ''
浏览 1提问于2019-02-25得票数 2
回答已采纳
1回答
我想从本地报纸上得到卡片上的输入。我试着把textInput放进卡片，card.title，card.content或card.actions，但是它不起作用，我做错了什么？在这方面有什么工作吗？下面是我正在编写的代码：
import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {
TouchableRipple,
Switch,
Title,
Card,
TextInput,
Parag
浏览 6提问于2020-07-22得票数 4
回答已采纳
我正在世博会上使用React Native Web。我读到它可以很好地实现可访问性，但是我不知道如何为输入添加标签：
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
为了澄清，因为它的名字很奇怪，我使用React Native Web而不是React DOM：
浏览 10提问于2020-02-27得票数 0
回答已采纳
如何通过单击按钮在React Native中添加文本输入？例如，我会按下"+“按钮，它会在视图的底部添加一个文本输入。
编辑:这是我的代码(删除了所有不相关的东西)。因为某些原因不能工作。单击该按钮不会执行任何操作。
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button,
TouchableHighlight, TouchableOpacity, S
浏览 0提问于2017-07-31得票数 1
1回答
我使用的反应-本机-电话输入包输入电话号码。当用户在输入电话号码后按下键盘上的enter键时，我希望下面的密码字段打开。包中没有这样的方法。我怎么能这么做？当键盘打开并输入密码时，我能只听回车键吗？
import { TextInput, View } from 'react-native';
import React, { useState } from 'react';
import PhoneInput from 'react-native-phone-input';
export default function SignUp({
浏览 2提问于2022-03-18得票数 0
我的react-native应用程序中有许多react-native，如果用户单击next键，那么下一个输入必须集中。我试图使用传递给所有returnKeyType的TextInput道具来完成这个任务。但是，这并不像预期的那样工作，即下一个输入没有重点。我的代码看起来就像
<TextInput
ref={firstInputForDaysInterestTextInputRef}
value={closingCosts.firstInputForDaysInterest}
onChangeText={v
浏览 2提问于2021-03-23得票数 0
回答已采纳
2回答
这是我现在的密码。
我对native..please的帮助完全没有反应。
import React from 'react';
import { StyleSheet, Text, View, TextInput,StatusBar, SafeAreaView,Image,Button,Alert} from 'react-native';
export default function App() {
return (
<SafeAreaView>
<View style={styles.container}&
浏览 7提问于2021-02-04得票数 2
回答已采纳
我正在尝试用React Native with Native Base开发一个应用程序。我想像这样来实现空白问题的填写。
所以我尝试在Native Base的Text组件中使用React Native的Textinput组件或Native Base的Input组件，如下所示。但它在Android上不能很好地工作。(呈现的句子中没有输入部分。)
如何使用Textinput或在文本中输入？
<View>
<Text>
<TextInput width={40}></TextInput>
<Text>is a
浏览 1提问于2018-01-25得票数 0
当TextInput被聚焦时，用户滚动直到输入离开可见的框架，输入变得模糊，键盘消失。我该如何解决这个问题？ 我在Android模拟器中运行代码。在iOS上，这个问题不会发生。如果您尝试点击FlatList底部的TextInput，键盘会立即关闭，这可能是因为一旦键盘打开，输入内容就在键盘下方。任何线索都将不胜感激 下面是要重现的代码 import React from 'react';
import { TextInput, FlatList } from 'react-native';
export default class App extends R
浏览 37提问于2019-05-29得票数 12
我正在开发React原生应用程序，在我的应用程序中，我尝试在我的应用程序中输入带有占位符的标签。但是我不知道如何实现这一点，所以请有人告诉我如何在我的应用程序中实现这一点。我真正想要的是带有任何占位符的输入标签。但是Input标签在风格上不应该像Bootstrap中的Reactangle。输入标签应类似于物料Ui设计中的TextField。
这是App.js
import React from 'react';
import {View, TextInput, Text, StyleSheet} from 'react-native';
const App =
浏览 12提问于2020-05-18得票数 0
我在React Native中有一个简单的<TextInput>，并且我想在值改变时打印一些文本。它在输入第二个字符后工作，但当用户只按下一个字符时就不起作用了。我尝试使用函数，甚至尝试使用onChange和e.target.value中的take，但总是在“搜索”状态下缺少一个字符。 import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';
const App = () => {
const [searc
浏览 16提问于2019-04-29得票数 2
回答已采纳
我有一个工作的ASK组件，它基本上需要用户输入和推送到Firebase数据库。
import React from 'react';
import {
Image,
Linking,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
ListView,
TextInput,
} from 'react-native';
import Input from '../components/Input';
import {fireba
浏览 0提问于2017-04-13得票数 0
回答已采纳
我正在使用bottomTabs导航器从react-native-navigaton到我的应用程序中的导航。但是，每次我有一个TextInput字段时，bottomTabs都会被向上推。 在显示键盘时，隐藏bottomTabs的可能方法是什么？
浏览 36提问于2019-05-07得票数 0
回答已采纳
我正在用react-native构建一个针对iOS和安卓的应用程序。
其中一件事是有一个连接到键盘的文本输入。
它的工作方式是TextInput在屏幕的底部。当它被触摸时-键盘打开，文本输入以相同的速度(因为它们连接在一起)随键盘上下移动。
现在，我使用onKeyboardWillShow和onKeyboardWillHide并对TextInput进行动画处理。问题是它不会以相同的速度移动。
基本上，我正在尝试这样做：
任何建议都会有帮助。
浏览 0提问于2016-01-14得票数 3
2回答
我正在开发React Native，我是一个初学者，如果我的问题特别简单的话，我很抱歉。
我目前在一个视图(Home.Js)中工作，而不是在App.Js中。在这个Home视图中，我有一个文本输入(用户名)，我想要获取用户单击按钮时输入的值。我看了解释视频，但他们解释了如何在App.Js中实现它，当我在我的视图中实现它时，它不起作用。这是我的代码。谢谢
#Here We Are in my Home View (Home.Js) not App.Js
import React from 'react';
import { Image, ImageBackground, Sty
浏览 2提问于2020-11-17得票数 0
我想在初始状态(而不是onFocus)调整概述的react-native-paper TextInput标签颜色。这是我的OutlinedInput组件：
import * as React from 'react';
import { TextInput } from 'react-native-paper';
const OutlinedInput = (props) => {
return (
<TextInput
mode='outlined'
label={props.label}
浏览 0提问于2020-09-14得票数 2
我用的是“反应-原生-纸”："^4.12.5“和”反应-原生“："0.70.4”
我想用反应纸把左边的布局转换成右边的布局。但我发现了一个问题。我不知道如何将输入和TextInput的占位符对齐。我也想隐藏光标。
我尝试过使用纸张组件的样式支柱注入"textAlign“，但是它似乎不起作用，而本地的纸道具不允许这种转换。你知道我怎样才能改造纸张组件吗?还是你认为我必须自己设计？
import * as React from 'react';
import {StyleSheet} from 'react-native';
imp
浏览 13提问于2022-11-10得票数 1
回答已采纳
我很难正确地扩展react-native-paper组件。我做错了什么或者怎么做正确？事实上，我对打字本并不完全陌生，但我一直在为这个问题而奋斗：
// TextInput.tsx
import React from "react";
import { TextInput as PaperTextInput } from "react-native-paper";
import { TextInputProps } from "react-native-paper/lib/typescript/src/components/TextInput/TextI
浏览 9提问于2020-06-23得票数 2
在我的代码中，我制作了树标签，在第一个标签上有两个输入字段和按钮。现在，在输入中输入值并单击按钮后，我必须将vale发送到其他选项卡。就像在名字栏中一样，我正在输入名字" Abhi“，点击按钮，这个Abhi应该反映在标签2上。与在动物字段中一样，这个动物应该反映在第三个标签上。请帮帮忙
import * as React from 'react';
import { View, StyleSheet, Dimensions,Text,TextInput,TouchableOpacity } from 'react-native';
im
浏览 7提问于2020-08-14得票数 1
我在react原生项目上工作，我正在创建带有文本和TextInput的页面，我希望当我在TextInput字段中键入时，标签的文本会消失。这是TextInput的代码： <TextInput
label="Classification"
keyboardType="default"
underlineColor="#009688"
blurOnSubmit={false}
// editable={false}
浏览 49提问于2021-07-28得票数 0
回答已采纳
23回答
我是React Native的新手，我想知道如何隐藏/显示组件。
下面是我的测试用例：
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input: text})} />
<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Te
浏览 168提问于2015-05-16得票数 179
回答已采纳
2回答
我对ref和条件呈现有问题。当我点击一个按钮标签时，我想聚焦一个输入标签。基本上，我有这个简化的代码。
class App extends React.Component {
textInput
constructor(props) {
super(props)
this.state = {isEditing: false}
this.textInput = React.createRef()
}
onClick = () => {
this.setState({isEditing: !this.state.isEditing
浏览 1提问于2018-06-23得票数 11
回答已采纳
2回答
这是我的React Native代码，使用React Native Paper生成文本输入。 import * as React from 'react';
import { TextInput } from 'react-native-paper';
class MyComponent extends React.Component {
state = {
text: ''
};
render(){
return (
<TextInput
label='Email
浏览 20提问于2020-09-09得票数 1
回答已采纳
我正在使用，并使用样式化的组件来响应本地纸库。基本上，我想定制TextInput内部组件: Label和html输入。
问题如下：
1)如何改变标签样式？例如：宽度\大小\颜色等等？
2)如何更改html输入样式？
在浏览器的情况下，我希望设置outline: none以防止蓝色边框显示焦点。我知道，在本机的情况下，我们没有html，而本地web传输它。
我不明白如何捕获嵌套的label组件来更改它的样式。因为我想在没有填充的时候显示灰色标签，填充时显示紫色，输入的文本应该是黑色。对于网络来说，这是微不足道的，但对于本地人来说，我不知道如何处理它。
那这有可能吗？
谢谢你的帮助。下面是代码示例
浏览 2提问于2020-04-06得票数 2
回答已采纳
我正尝试在react-native(安卓)中渲染一个文本输入，在它下面有一条线，这是从borderBottomWidth属性put中得到的，当我输入的时候，出现了两行，看起来不太好，无法删除它，我尝试使用underlineColorAndroid='transparent'，但没有起作用
import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-co
浏览 0提问于2019-09-01得票数 2
我有以下代码，并且只在我的android设备上获得此错误: IllegalViewOperationException:无法在dispatchViewManagerCommand上使用标记标签执行dispatchViewManagerCommand操作，因为该视图不存在
如果用户键入输入字段并按下next，则会发生错误。如果输入字段为空，当我单击next时没有出错。
import React, { useContext, useEffect, useState, useCallback } from 'react';
import { TouchableHighlight }
浏览 1提问于2021-05-19得票数 6
我正在使用Create React Native app with Expo来构建一个应用程序。当按下TextInput时，我需要隐藏特定视图中的底部选项卡栏。默认情况下，Android会推高标签栏。
我不想触发选项卡栏隐藏，因为当键盘没有显示时，选项卡栏必须在视图中。
"expo": "^31.0.2",
"react": "16.5.0",
"react-navigation": "^2.18.2"
我将各种堆栈导出为createBottomTabNavigator。
const SearchS
浏览 0提问于2019-04-13得票数 2
3回答
我想做一个“数字”组件，它接受输入的数字。我试着去做，但没有用。
这里的密码-
import React, { Component } from 'react';
import { TextInput } from 'react-native';
constructor(props)
{
super(props);
this.state = {
text: ''
};}
handleInputChange = (text) => {
if (/^\d+$/.test(te
浏览 1提问于2019-08-03得票数 0
回答已采纳
这里我想把textInput中的数据赋给变量a，我该怎么做呢？(也就是说，当用户在textInput中输入数据时，我希望将其赋给变量a。) import React, { Component } from 'react'
import { Text, View, TextInput} from 'react-native'
export default class deneme1 extends Component {
constructor(props) {
super(props);
this.state =
浏览 48提问于2020-12-23得票数 0
回答已采纳
我刚接触React Native，对js并不熟悉。
我想让程序显示我在按下Button时用TextInput写的内容(在Button下面有一个Text )。我想也许我应该设置两个状态:将state1 text作为Text输入，并将state2 mimin作为按钮输入，以及当按钮pressed时，将state2 mimin设置为state1 text。
我试过使用下面的代码，但当我单击Button时，它会显示红色页面。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
浏览 0提问于2016-11-10得票数 6
回答已采纳
我需要在输入输入时显示静态消息，或者如果用户关注react-native中的TextInput。 我需要显示输入字段必须包含以下字母。 我如何才能以浮动的方式显示在框下面，而不是在react-native的屏幕视图中 <TextInput>
underlineColorAndroid="transparent"
secureTextEntry={this.state.passwordDisplayed}
textContentType="password"
onChangeText={text => this.
浏览 20提问于2020-04-15得票数 0
在一个应用程序上工作，用户可以输入标题，他们的名字和段落来提交一个故事，然后存储在Firestore数据库中。然而，尽管我输入了一些文本，但当我按下submit按钮调用storeData()时，console.log(firebase.firestore.collection('story'))是"object Object“，而console.log(this.state)是"undefined"，尽管我已经在构造函数中清楚地定义了它。
import {
StyleSheet,
Text,
View,
Image,
TextInpu
浏览 13提问于2021-05-17得票数 1
回答已采纳
2回答
我想创建一个输入框，如下所示： ? 但我是这样设计的，我不知道如何在输入边框上添加标签 ? 我的代码是： <InputBox label="Email" icon={true} keyboardType="email-address" defaultValue={emailId} onChangeText={text => setEmailId(text)} /> 输入组件： import React from 'react';
import {View, StyleSheet, TextInput,
浏览 49提问于2021-09-17得票数 1
我试图通过在输入字符串后检查TextInput的值来测试它，但它不起作用。任何帮助都将不胜感激。
下面是代码：
import React from 'react'
import { TextInput } from 'react-native'
import { fireEvent, render } from "@testing-library/react-native"
test('<TextInput/>, () => {
const { getByTestId } = render( <TextInp
浏览 4提问于2022-04-23得票数 3
我有两个标签下面的代码，我有一个视图1.js页面和视图2.js页面.I想要推动这些标签栏中的View1和View2。
这是我的代码。
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TextInput,
Image
} from 'react-native';
var Signin=require('../signin')
var Registration=require('../registration')
var View1=require('
浏览 0提问于2016-04-26得票数 0
我正在创建一个应用程序&我正在登录屏幕上工作。我需要帮助添加用户图标内的用户名字段和密码图标内的密码字段。我想让它更漂亮的应用程序。也推荐给我其他react native的材料设计网站，比如react-native-paper
import React from 'react';
import { StyleSheet, Text, View,Alert,Icon} from 'react-native';
import { TextInput,Button,IconButton,Colors,Avatar } from 'react-nativ
浏览 184提问于2019-07-16得票数 3
1回答
我在其中一个教程中找到了这段代码，据我所知，当在输入中输入文本时，文本保存在异步存储中，但是如何使按下按钮时，形成一个对象并将其添加到状态中，如thi的{id: 1, name: 'Alex'} ，如何将其重新定位？
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'
浏览 1提问于2020-08-13得票数 0
1回答
我想显示一个模态时，用户点击按钮，而不排除键盘。不幸的是，键盘一出现就会被取消。
最低再审案件：
import * as React from "react";
import { Button, Modal, Text, TextInput, View } from "react-native";
function TestComp() {
const [showingModal, setshowingModal] = React.useState(false);
return (
<View style={{ flex:
浏览 1提问于2020-05-07得票数 6
1回答
我使用了这个时间选择器，我的目标是从选择器中选择一个时间，并将它显示在我的文本输入中，直到我选择它不显示的时间，并给我一个错误，文本输入值必须是字符串，任何人能告诉我我做错了什么，这是我的代码吗？
import React, { useState } from 'react';
import { View, TextInput, Text, Platform, Button } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker&
浏览 10提问于2021-08-18得票数 0
回答已采纳
1回答
初学者在这里提出问题，不确定具体会考虑什么，但我正在尝试创建一个表单，用户可以在按下按钮时添加和删除输入行。当按下“添加”或“删除”按钮时，需要更改什么来呈现新组件或删除组件？现在，Add和Remove按钮适当地更改了textInput数组，但实际上并没有添加或删除组件。
以下是我的当前代码：
FormScreen.js
import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { Button, Caption } from &#
浏览 1提问于2022-01-13得票数 0
回答已采纳
1回答
我使用的react-native .My输入字段在full width上没有显示，原因是什么？但当我在IOS上检查时，它可以正常显示全宽输入栏。下面是我的代码
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
StatusBar,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
class App extend
浏览 4提问于2017-01-15得票数 1
回答已采纳
我有一个TextBox组件，它在我的中呈现一个输入框。它使用反应-原生纸：
import * as React from 'react';
import {View} from 'react-native';
import {TextInput} from 'react-native-paper';
const TextBox = () => {
const [text, setText] = React.useState('');
return (
<View>
<TextI
浏览 9提问于2022-04-20得票数 3
2回答
我有一个计数器按钮，它可以减少/增加文本输入的数字1。我的计数器最初被设置为0，如果我按下“增加”按钮，它会增加1。但是，如果我删除初始的0并手动输入一个数字，计数器按钮将把它增加到值1。
我该怎么解决这个问题？
此外，由于maxValue和minValue似乎不起作用，我如何防止这个数字超过99而小于1。
ShopAttack.js
import React from 'react';
import { Badge } from 'native-base';
import {MaterialIcons as Icon} from '@expo/vect
浏览 0提问于2019-07-29得票数 1
我正在做一个使用react native cli的react native项目。问题是，当键盘处于可见/活动状态时，TextInput会突出显示&它会挤压视图并打乱布局，这让我想起了KeyboardAvoidingView的行为。尽管我在这个项目中没有使用KeyboardAvoidingView，因为所有的文本输入都在屏幕的上半部分，所以它们不会被键盘覆盖。
<TextInput
style={styles.inputText}
multiline={false}
onSubmitEditing={() => Keyboard.dismi
浏览 0提问于2020-03-05得票数 1
1回答
我提出这个问题是因为我最近在寻找Mac地址的字符串掩码。所以我决定创建我自己的函数。前面的代码： import React from 'react'
import {TextInput} from 'react-native-paper'
import {TextInputMask} from 'react-native-masked-text'
.
.
.
<TextInput
mode="outlined"
label="MAC"
浏览 19提问于2020-06-25得票数 1
嗨，我有这样的TextInput ? 现在，当我在TextInput中输入文本，当我单击cancel时，它正在清除TextInput中的文本，现在，我想在单击is时隐藏Cancel。 以下是我的代码 import React, { Component } from 'react';
import {
Dimensions,
View,
Animated,
TextInput,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import colo
浏览 27提问于2019-02-26得票数 0
3回答
如何在JSS中指定:焦点属性？
、、、、
我将react-native-web与expo和react-native-paper (material ui)一起使用
我的问题是在编译的web版本中的焦点轮廓属性上的文本区域，所以我需要去掉这个蓝色边框。通常我会这样做
textarea:focus {
outline:none!important
}
对于react-native，我们不能只使用jss而使用css，但是如何使用这个属性呢？
<TextInput
label='Email'
value={this.state.text}
onChangeText={text => thi
浏览 0提问于2019-09-01得票数 1
2回答
如何编写此状态，就像在ios中一样，使用React语法：
txt1.text = label.text
我试了很多次，但都失败了。
import React, { Component } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
export default class App extends Component {
state = {
TextInputValue: '',
};
onPress = () => {
th
浏览 0提问于2019-08-08得票数 4
回答已采纳
2回答
如何更改TextInput元素内的文本输入颜色，以响应本机元素，我尝试将color="red"传递给组件，但由于某种原因，它无法工作。
下面是我使用的代码：
import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Text, Button, Input } from "react-native-elements";
import Icon from "react-native-vec
浏览 1提问于2020-05-20得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
