当在自定义组件(React-Native)中的视图内使用时，TextInput不可交互
在React-Native中，当在自定义组件的视图内使用TextInput时，可能会遇到TextInput不可交互的问题。这个问题通常是由于样式或布局的问题引起的。下面是可能导致TextInput不可交互的一些原因和解决方法：
- 样式问题：检查TextInput组件的样式属性，确保没有设置不正确的样式，例如将其父容器或其他元素的样式设置为绝对定位（position: 'absolute'）或隐藏（display: 'none'），这可能会导致TextInput无法正确响应交互。确保TextInput及其父容器的样式设置正确，以便它能够在视图中正确显示并响应交互。
- 布局问题：检查TextInput组件在父容器中的布局方式，确保它具有足够的空间和正确的布局属性，例如flex属性、宽度和高度等。如果TextInput没有足够的空间或受到其他元素的覆盖，它可能无法正确响应交互。确保TextInput的布局属性设置正确，以便它能够在视图中正确显示并响应交互。
- 组件嵌套问题：检查是否有其他组件或视图嵌套在TextInput的父容器中，可能存在其他组件或视图的事件处理程序阻止了TextInput的交互。确保没有其他组件或视图嵌套在TextInput的父容器中，并且它能够直接接收到用户的交互事件。
如果以上方法都没有解决问题，可以考虑使用React-Native的调试工具来进一步分析问题所在。可以使用React-Native的调试工具查看组件的层次结构、样式属性和事件处理程序，以帮助定位问题所在。
腾讯云相关产品推荐：腾讯云移动应用·解决方案 产品介绍链接地址：https://cloud.tencent.com/solution/mobile
相关·内容
我在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
我需要在输入输入时显示静态消息，或者如果用户关注react-native中的TextInput。 我需要显示输入字段必须包含以下字母。 我如何才能以浮动的方式显示在框下面，而不是在react-native的屏幕视图中 <TextInput>
underlineColorAndroid="transparent"
secureTextEntry={this.state.passwordDisplayed}
textContentType="password"
onChangeText={text => this.
浏览 20提问于2020-04-15得票数 0
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
我非常需要你的帮助。我试图在我的状态属性中创建一个JSON对象用户，以检查我的身份验证是如何工作的。但是，当我试图获得访问时，我收到了错误“无法读取属性‘状态’的未破解”，错误箭头指向代码const { users，textInputEmail，textInputPassword }= this.state的这一部分。此外，当我试图检查用户时，它也显示了“未定义”。我做错了什么？
import React, { Component } from 'react'
import { View, TextInput } from 'react-native'
impo
浏览 1提问于2021-06-30得票数 0
回答已采纳
我有一个自定义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
回答已采纳
1回答
我是全新的反应-本机，并一直试图自定义掩码输入。但是，即使我在TextInput下指定了掩码，我也只能得到10以上的数字。我不知道我做错了什么。您的协助将不胜感激。
请参阅我的代码如下：
import React, { Component } from "react";
import { StyleSheet, SafeAreaView, TextInput } from "react-native";
export default class InputMask extends Component {
state = {
mask
浏览 6提问于2022-05-22得票数 0
1回答
这是我第一次使用react本机，我想移动到另一个屏幕(slide2)，我有一个错误，上面写着“我们找不到导航对象。您的组件在导航器中吗？”他们说错误在幻灯片中，我有点卡住了，这就是我走了多远。请也解释一点，将非常感谢，并告诉我应该添加什么，在哪里，谢谢。
slideOne.js页面代码
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '
浏览 4提问于2020-05-16得票数 0
回答已采纳
我目前正在学习如何使用Redux后使用香草反应原住民一段时间。我试图理解如何存储TextInput的值。以前，我只需要简单地将值存储在状态中。我尝试了一些东西，包括下面的代码示例。
目前，todoInput.value还没有定义。我还尝试将TextInput的TextInput支柱直接分配给一个用let定义的变量，但这仍然没有定义。
如何修改代码，使TextInput的值不被定义？
import React from 'react';
import { View, Button, TextInput } from 'react-native';
import {
浏览 0提问于2018-08-12得票数 2
回答已采纳
我正在尝试学习原生的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
回答已采纳
例如，我有一个库/包，它导出一些组件：
function SomeComponent() {
...
return (
<View>
...
<TextInput ... />
...
</View>
);
}
有没有什么办法我可以使用SomeComponent而不是TextInput，而是以某种方式注入我的自定义MyCustomTextInput？
我知道使用CustomTextInput prop创建SomeComponent是可能的(无论是像
浏览 29提问于2019-10-26得票数 0
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
TouchableOpacity,
TextInput,
} from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.state = {
InputArr: [],
FinalVal: [],
Sum: 0,
浏览 1提问于2021-12-03得票数 2
我使用RootForm作为表单页面的基本模板。有一个字段与位置自动完成相关联，所以我包装了react-native的本机自动完成，并在该字段中使用它。但是，自动完成下拉列表被表单中呈现在其后面的其他字段阻止。我试着在网上搜索，但没有有用的资料。使用modal或zIndex不是这里的解决方案。如何使下拉列表位于其他组件的顶部，即使它比其他组件更早呈现？
下面两个代码片段是我的rootform和autocomplete呈现函数。
render() {
const { input } = this.state;
const cities = this.state.cities
浏览 2提问于2017-08-31得票数 2
我正在尝试验证一个文本字段点击提交按钮。但我总是会犯错误-
TypeError:未定义不是我的模拟器上的对象(计算'props.deviceLocale')。
(我正在使用Android仿真器)。
但是，我在代码中没有使用“deviceLocale”。我不知道我的代码中的任何东西是否需要它。
这是我的密码：
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, TextInput } from 'react-native';
import Va
浏览 0提问于2019-03-26得票数 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
回答已采纳
我有一个工作的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
回答已采纳
我想构建一个组件，它接受一个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
回答已采纳
我想要创建一个6 TextInput的OTP输入屏幕。我希望TextInput在输入上一个TextInput的值时自动聚焦到下一个TextInput。
我遵循了中给出的解决方案
但是我得到了一个异常TypeError: null is not an object(evaluating 'textInputToFocus.current.focus')，所以在下面的代码中，我的变量textInputToFocus基本上是空的，我不知道为什么？
import React, { Component } from 'react';
import {
Style
浏览 0提问于2019-11-10得票数 5
回答已采纳
我试图在Formik中使用创建的TextField组件，我创建了自己的TextField组件，名为Input，并导入到表单中，但我无法更改它的任何属性或调用它的方法，比如样式或onChangeText，例如，我试图在onChangeText中使用的任何方法都不起作用。这是我的代码，取自组件和公式。 下面是我的输入组件的代码和我将其导入到的表单： // Input Component
import React, { useState } from 'react';
import { TextInput, TextInputProps } from 'react-nati
浏览 14提问于2021-01-14得票数 1
回答已采纳
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
回答已采纳
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
我正在学习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
虽然按下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
回答已采纳
我想做一个银行卡号码输入功能。这里的想法是，当用户完成一个输入框时，它将自动集中在下一个输入框上。就像以前的照片：
TextInput component(AutoTextInput):
import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native'
import colors from '../config/colors';
import AppText from './AppText/AppText';
fun
浏览 0提问于2021-04-12得票数 0
1回答
尝试使用带有ESM配置的Jest测试本机组件，并获得Jest无法解析来自'react-native'的导入的错误。错误看起来如下：SyntaxError: The requested module 'react-native' does not provide an export named 'StyleSheet'。知道我做错什么了吗？
RN版本：0.70.4
示例组件：
import React, { ReactElement } from 'react';
import { StyleSheet, Text, View }
浏览 21提问于2022-11-06得票数 0
我试图添加样式到我的自定义组件在反应本机，但无论我做什么，风格没有任何影响。这是我的代码：
// App.js
import MyCustomComponent from './components/myCustomComponent.js';
render() {
return (
<View style={styles.container}>
<MyCustomComponent style={{marginTop: 10}}/>
</View>
);
}
该项目编译良好，我的自定义组件在屏幕上显示得
浏览 2提问于2019-04-15得票数 4
回答已采纳
我定义了属性_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
回答已采纳
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
回答已采纳
2回答
我试图使用onChangeText创建一个自定义输入组件，但是每当我开始在textInput框中输入时，都会出现一个错误。我已经检查了代码很多次了，在我看来一切都很好。
import React from "react";
import { TextInput, StyleSheet } from "react-native";
const defaultInput = props => (
<TextInput
underlineColorAndroid="transpar
浏览 1提问于2018-10-18得票数 0
3回答
当电影标题写在搜索栏上时，我使用本机来呈现来自API的一些电影海报。但是，当我试图在我的应用程序上呈现搜索栏时，我会得到以下错误：
属性'value‘在类型'{ searchValue: string；setSearchValue:调度；}’中缺少，但在类型'Props‘中是必需的。
在它的下面：
Search.tsx(7，5)：'value‘在这里声明。
下面是应用程序代码：
import React from 'react';
import { useState, useEffect } from 'react';
impor
浏览 1提问于2021-02-16得票数 0
回答已采纳
1回答
大家好，我正在努力学习ReactJS，我想知道为什么每个人都在使用标记来构建表单。
我是说当我使用这个代码时：
import { TextInput, Form, View } from 'react-native'
<Form onSubmit={this.onSubmit}>
<TextInput/>
</Form>
我发现了一个错误：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件。
或者当我使用这个代码时：
impo
浏览 1提问于2017-09-12得票数 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
我有一个反应本土的项目，我正在工作。有两个屏幕。一个屏幕是基于对zillows的api调用呈现的属性和细节的列表。当一个属性被点击时，我希望它使用传递到新屏幕的zpid转到另一个屏幕。
在新屏幕上，我设置了两个状态。我的加载状态设置为true。在进行新的api调用之前，加载将设置为true，并在加载状态设置为false之前，我希望屏幕显示加载文本。一旦将加载设置为false并将属性状态设置为api调用的结果，我希望在屏幕上呈现属性详细信息。
我现在的问题是，我现在有一个useEffect，它在屏幕加载时运行zillow调用。将结果存储在属性状态后，我将加载设置为false。
当发生这种情况时，
浏览 2提问于2022-07-12得票数 0
回答已采纳
刚开始学习react native，我试图弄清楚react native项目是如何运行的，但我对以下代码感到困惑：
import { AppRegistry, Text, TextInput, View } from 'react-native';
我假设在我的项目文件夹中应该有像Text.js和TextInput.js这样的文件，它们将在执行过程中被调用。我确实找到了两个，但它们都在不同的地方。Text.js在proj_root\node_modules\react-native\Libraries\Text中，但TextInput.js在proj_root\node_mod
浏览 0提问于2018-02-17得票数 0
我买了一个关于Udemy的反应本土化课程，教React的人使用了{...this.props}。但这对我没用。这是错误消息。
TypeError:未定义不是对象(计算'_this.props')
我该怎么办？
LoginForm.js
import React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import Input from '../components/Input';
const
浏览 6提问于2020-03-04得票数 1
回答已采纳
2回答
使用React本机TextInput，当在键盘可见时点击Back-Button (屏幕截图中的红色1)时，TextInput值可以在稍后的某个点进行编辑。当点击检查/进入图标(屏幕截图中的红色2)时，键盘消失后不可能更改TextInput。在此之后，当点击输入时，插入符号会在抽头期间出现，但随后消失，什么也不会发生。
这是我的组成部分：
export class MyInput extends Component {
constructor (props) {
super(props);
this.state = {
i
浏览 1提问于2019-01-18得票数 1
回答已采纳
我是新的反应本机我正在使用expo应用程序来运行我的代码没有索引文件，如在其他问题中解释的所有文件我有app.js，login.js，router.js，home.js和我的应用程序流应该像这个Login>按钮点击>主页但在按钮点击我得到错误未定义不是一个对象(评估'this.props.navigation')，请帮助我哪里出了问题。提前谢谢。
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login
浏览 0提问于2017-08-30得票数 0
我第一次使用Typescript创建了一个react-native组件。我在51行得到以下错误：Property 'propTypes' does not exist on type 'typeof TextInput
类似的话题对我没有帮助。有没有人有主意？谢谢
import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import PropTypes from "prop-types";
浏览 103提问于2020-11-15得票数 0
4回答
请帮我找出以下React-Native代码中的错误之处？ 它说在构造函数(props)之后应该有';‘分号。我不知道我声明的方式是否正确。 import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';
export default function App() {
constructor (props){
this.state = {
text: 'HI'
}
}
render ()
浏览 19提问于2019-12-17得票数 1
2回答
我正面临一个错误，叫做"undefine不是一个对象“(计算'_this.props')。它是一个非常简单的代码，我使用的是现代函数function本机。这里不使用类。。
我的代码是这个App.js
import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {
浏览 3提问于2020-02-04得票数 1
我曾尝试过几篇关于如何做到这一点的文章，包括airbnb react-native和jest的酶指南(分别)。(例如：、或)
但每当我尝试渲染(不是挂载，而是崩溃)任何本机组件时，我都会收到很多警告(我有多组并发测试)。警告总是关于本机道具不被识别。
Warning: Unknown props `focus`, `secureTextEntry` on <TextInput> tag. Remove these props from the element.
in TextInput (created by TextInput)
in Te
浏览 5提问于2017-02-04得票数 5
大家好，我是新来的反应，我刚开始学习。
我正在尝试react native，我已经研究过它，现在我正在尝试学习它，这是我在这方面的第一天，
我刚刚创建了react本机项目，并在创建js中创建了一个js文件和写入视图，并导入到index.android.jd中，但它显示了默认视图
以下是代码
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Comp
浏览 7提问于2017-07-14得票数 0
我有一个调查问题列表供用户填写，并尝试在填充子组件输入字段时检查每个问题并更新父组件状态，但是在第一个组件上，我一直收到来自TextInput的未定义文本。 这是我的父组件'SurveyScreen'： export default function SurveyScreen({navigation, route}) {
const [childNameValue, setChildNameValue] = useState('');
function handleChange(newValue) {
setChildNameValue(newV
浏览 41提问于2021-11-16得票数 0
我已经删除了以下呈现结果：
return (
<View style={{backgroundColor:'red'}}>
<TextInput value={'Hello'}/>
</View>
);
生成的TextInput在iOS中是不可见的，除非我指定了高度，并且当在容器中使用柔性方向：‘行’时，我也需要指定它的宽度。
这只发生在iOS上，Android似乎像预期的那样工作。
有没有一种在没有固定大小的情况下在TextInput中显示iOS的方法？
当前依赖关系：
"dependencies
浏览 3提问于2016-01-29得票数 22
回答已采纳
我在我的应用程序中使用了很多react-native TextInputs，并且我通过添加以下内容手动更改了每个selectionColor：
<TextInput
//various settings
selectionColor={white}
//more settings
/>
进入每一个TextInput。在对如何在全球范围内改变这一点进行了一些调查之后，我发现了defaultProps，我相信下面的内容
TextInput.defaultProps={selectionColor: 'white'}
应该足以彻底改变它。但是，我不确定我的语
浏览 5提问于2018-02-28得票数 1
回答已采纳
我为最终形式创建了自定义的TextInput。我需要为FieldRenderProps指定类型。我有个错误：
TS2769: No overload matches this call. Overload 1 of 2, '(props: TextInputProps | Readonly<TextInputProps>): TextInput',
gave the following error.
Type '{ name: string; onBlur:
(event?: FocusEvent<HTMLElement, Eleme
浏览 2提问于2022-03-11得票数 0
我正在尝试创建一个自定义组件，该组件由word包装在一起的TextInput上方的文本组成。我试图实现的效果是在TextInput的每一行之间都有一个文本，这样当在TextInput中输入内容时，文本中的内容就会直接显示在它的正上方。TextInput之间的线是不可编辑的，这一点很重要。你知道怎么做吗？，上面的图片是我试图获取的行为，底部是它应该是什么样子的。
浏览 2提问于2017-10-27得票数 0
我正在创建一个自定义组件，脚本是使用React的钩子用TypeScript编写的
我的组件将使用我的一些类型记录类型，并将其与TextInput类型混合(这样我就可以访问TextInput支持)
这是我的自定义组件示例代码
import { Animated, Platform, TextInput, TextInputProps, View } from 'react-native'
type PropsType = TextInputProps & { //Or should I using TextInput instead of TextInputProps?
浏览 2提问于2020-09-12得票数 1
回答已采纳
我还是个反应新手。我想让我的登录按钮创建一个新的屏幕上的新闻。我尝试过多次尝试，但似乎无法克服这个错误：
我做错什么了？
LoginForm.js:
import React, { Component } from 'react';
import { TextInput, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
im
浏览 1提问于2018-09-14得票数 3
我正在制作一个上传产品以供销售。我制作了一个组件，用于从用户接收输入号码(单位或价格)，在主页中需要计算总价:单位*价格。然而，我被塞在这里..。我不知道如何才能从组件中得到值。
我已经附上了我的密码。你能看一下吗？太感谢你了！
用于放置数字的组件
import React from 'react';
import { StyleSheet, View } from 'react-native'
import { TextInput } from 'react-native-gesture-handler';
import colors from
浏览 3提问于2021-04-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
