ReactNative:元素出现在顶部，但不会触发onPress
React Native是一种用于构建跨平台移动应用的开发框架。它允许开发者使用JavaScript编写应用程序，并在iOS和Android等多个平台上运行。React Native的核心思想是使用组件来构建用户界面，这些组件可以直接映射到原生视图，从而提供了更好的性能和用户体验。
对于元素出现在顶部但不触发onPress事件的情况，可能有以下几个原因：
- 元素位置问题：首先，需要确保元素的位置确实在屏幕的可见区域内，并且没有被其他元素遮挡。可以通过调整元素的布局样式，例如使用绝对定位或调整元素的z-index属性来解决。
- 事件绑定问题：其次，需要检查是否正确地绑定了onPress事件。确保元素的onPress属性指向了正确的处理函数，并且该函数已经正确定义和实现。
- 其他事件冲突：还有可能是其他事件与onPress事件发生了冲突，导致onPress事件无法触发。可以尝试检查是否有其他事件（例如onLongPress）与onPress事件同时存在，并根据需求进行调整。
针对React Native开发中的这个问题，腾讯云提供了一系列相关产品和服务，例如：
- 腾讯云移动应用开发平台：提供了一站式的移动应用开发解决方案，包括云端资源管理、推送服务、移动分析等功能，可以帮助开发者更高效地构建React Native应用。
- 腾讯云移动直播：为开发者提供了实时音视频传输的解决方案，可以用于实现音视频通话、直播等功能，适用于需要在React Native应用中集成音视频功能的场景。
- 腾讯云对象存储（COS）：提供了高可靠、低成本的云端存储服务，适用于React Native应用中的文件存储和管理需求。
以上是腾讯云相关产品的简要介绍，更详细的信息和产品介绍可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
我需要一个反应本土化(使用的打字本)的帮助。我映射状态，调用onpress函数，但不起作用。我不知道这件事我真的需要帮助。0000000000000000000000000000000000000000000000000000000
错误
this.onPressItem is not a function
代码
import React, { Component } from 'react';
import ReactNative from 'react-native';
import { styles } from './labsoft/labsof
浏览 3提问于2017-03-10得票数 2
回答已采纳
1回答
类对象可以从调用吗？
、、、
我在研究ReactNative.Navigator.renderScene道具。
'use strict';
import React,{Component} from 'react';
import ReactNative from 'react-native';
const {
TouchableHighlight,
Navigator,
AppRegistry,
Text,
View,
} = ReactNative;
class TestClass extends Component{
render(){
浏览 2提问于2017-04-22得票数 4
回答已采纳
。
我正在跟踪并有一个非常简单的设置：
import React, { useState } from "react";
import { View, Text, Image, ScrollView, TextInput, Button } from "react-native";
const Styles = {
image: { width: 200, height: 200 },
};
const Cat = () => {
const [isHungry, setIsHungry] = useState(true);
return
浏览 4提问于2020-08-13得票数 0
3回答
我正在开发一个ReactNative应用程序，我有下面的代码，它呈现一个TextInput和一个按钮，它向我的API提交请求。使用我的Android模拟器，我可以先用鼠标选择文本输入，然后在键盘上键入输入，从而将输入输入到文本字段中。我可以点击“连接”按钮，所有的工作，如预期。当我在亚马逊火棒上安装这个应用程序时，TextInput不再是可选择的了。我可以选择“连接”按钮，并可以看到用户界面反射按钮点击按钮，但TextInput不会聚焦或启动屏幕上的键盘。通过在autoFocus={true}上设置<TextInput />，我能够让键盘获得焦点，但这导致的用户体验不太理想。我怎么
浏览 5提问于2021-06-13得票数 3
回答已采纳
我试图阻止用户在React Native中录制视频时通过Android后退按钮或手势返回。根据React导航的，它应该由beforeRemove事件侦听器处理。但是当返回时，事件永远不会被触发。
我尝试使用blur，它被触发了，但是因为这个事件没有preventDefault()方法，所以在这个场景中它是不可用的。
React导航- v5.x
React Native - 0.63.2
以下是我试图实现的屏幕的示例代码
const VideoCapturePage = ({navigation}) => {
const [isRecording, setIsRecording] =
浏览 3提问于2020-08-12得票数 6
1回答
我需要帮助，我有一个组件，你的功能是渲染的应用程序的标题，与右和左的图标，中间是当前页面的标题。但是，我可以重新渲染页面的标题，但是图标不能重新呈现.我没有办法解决这个问题。
标题的MyCode。
import React, { Component } from 'react';
import ReactNative from 'react-native';
import { Icon, Text } from './../labsoft.ui';
import styles from './styles';
const Head
浏览 4提问于2017-03-17得票数 1
回答已采纳
1回答
一般来说，我对ReactNative编程和.tsx文件是个新手。我正在尝试显示一个基本的FlatList，并从ReactNative文档中复制了以下代码：(https://reactnative.dev/docs/flatlist)。它只是稍微修改了一下，以适应我的ReactNative应用程序，我正在用Visual Studio代码编辑它。 有谁知道显示FlatList的正确方法吗？我已经花了2-3天的时间来修补它，但我显然遗漏了一些关键的要素。难倒我了。 import * as React from "react";
import { useState, Componen
浏览 69提问于2021-10-31得票数 0
我想在ReactNative TextView中添加一个外部链接。怎么能做到这一点？
我刚刚试过了，它是工作的，但我想拥有所有的链接与默认的颜色。
<Text style={{color: 'blue'}}
onPress={() => Linking.openURL('http://google.com')}>
View more details
</Text>
是否有仅用于生成链接的库ReactNative库？
浏览 0提问于2018-07-05得票数 1
回答已采纳
我决定将我的ReactNative项目转换为TypeScript。我是TypeScript新手，很难用自定义组件和继承来解决这个问题。这是我的(缩小)代码。
import React, { Component } from "react";
import { Button, View } from "react-native";
interface IMyComponentProps extends React.Props<IMyComponentProps> {
colWidth?: number;
}
class MyComponent
浏览 1提问于2018-04-28得票数 2
回答已采纳
我使用keyboardAvoidingView来显示输入并使用下一个焦点。但是，当我点击第一个输入(打印标签1623-Acidez )，这是隐藏的。怎么才能表现出来呢？
<ReactNative.View key={this.state.selectedTabIndex}>
<ReactNative.ScrollView style={{ height: this.props.styles.height - 40 }}>
<ReactNative.KeyboardAvoiding
浏览 8提问于2017-06-07得票数 2
回答已采纳
我已经向onPress方法添加了一个函数，但该函数在加载应用程序时自动触发。我做错了什么吗？ <TouchableHighlight onPress={this.showMenu()}>
<View></View>
</TouchableHighlight>
showMenu(){
this.state.showMenu = true;
}
浏览 33提问于2016-07-30得票数 6
回答已采纳
我试图生成一个索引序列，其中连续的1出现在一个向量中，我偶然发现了这个奇怪的情况。为什么奇怪，因为我不明白当all()给出TRUE的时候，它意味着每个值都是真的，所以any()也应该给出TRUE，但这里不是这样的。
all(numeric(0))
# [1] TRUE
any(numeric(0))
# [1] FALSE
我发现的大多数问题都是关于将数字(0)与数字进行比较，以及如何避免生成数字(0)
浏览 0提问于2018-05-24得票数 10
我有一个iOS应用程序，在其中，我们采取用户的照片，然后允许他们把一些随机的自定义图像之上的图片。
当将这些自定义图片置于真实图像之上时，它们可以旋转、缩放这些自定义图像。(参见此 )
现在，我正在寻找完全相同的解决方案，同时制作ReactNative。
尝试了很多谷歌搜索，但没有发现结果。
只想问问社区，是否有任何ReactNative组件可用。
谢谢,
浏览 0提问于2017-10-04得票数 0
回答已采纳
关于下面的代码，我有两个问题，这个项目是ReactNative，UI组件使用and。
ReactNative：
"dependencies": {
"expo": "^26.0.0",
"react": "16.3.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",
"antd-mobile": "^2.1.8" }
图标不工作i
浏览 1提问于2018-04-14得票数 1
我正在为我的应用程序构建UI，我想知道用户在我的FlatList中单击的元素的y坐标。是什么原因导致我在onLayout中创建的变量不出现在onPress中，以及如何修复它？
<FlatList
keyExtractor={(item) => item.id}
data={data}
renderItem={({item}) => (
<TouchableOpacity
onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layo
浏览 5提问于2022-06-22得票数 1
回答已采纳
我正在遵循react-native的教程，但是他们是为IOS做的，其中有一部分使用AlertIOS.prompt，如下所示
AlertIOS.prompt(
'Add New Item',
null,
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{
text: 'Add',
onPress: (text) => {
浏览 1提问于2016-10-15得票数 3
1回答
图标功能未在印刷机上运行
、、、
我正在为我的路线使用React-Native-Router-Flux应用程序。在我的路径中，我在MoreIcon上有一个函数调用，它应该是onPress运行的，但除非我移除Lambda操作符，否则什么都不会执行，但随后它会在挂载组件时立即执行它。
我已经尝试返回并且不返回从onPress调用的alert函数，但仍然没有成功。
{/* Live Feed Tab View */}
<routes.Scene key = "Live" title = "Live" icon={Icons.LiveIcon}>
<rout
浏览 0提问于2018-01-06得票数 0
react-navigation：我使用ReactNative组件。
在右边按钮的导航栏中，单击事件不工作。
`_newCustomer() {
alert('点击新建');
}
static navigationOptions = {
title: '客户列表',
headerRight: (
<Button title={'添加客户'} onPress={this._newCustomer.bind(this)}/>
),
浏览 3提问于2017-05-19得票数 0
回答已采纳
如果我写这个onPress={() => this.submit()}而不是onPress={() => this.onSendBtnPressed()}，我可以得到文本值，但是如果我只编写onPress={() => this.onSendBtnPressed()}，我就看不到消息列表上的文本
这是我的茶水
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {KeyboardAvoidingView, Image, T
浏览 0提问于2018-05-11得票数 0
回答已采纳
我在Expo Snack中有一个很小的ReactNative应用程序，其中包含一个带有TouchableOpacity的组件。 export default function AssetExample() {
function clicked() {
alert('clicked')
}
return (
<View style={styles.container}>
<TouchableOpacity onPress={clicked()}>
<Text style={styles.p
浏览 24提问于2021-10-29得票数 0
回答已采纳
1回答
所以，在我的本地应用程序中，出于某种奇怪的原因，我的应用程序一直告诉我Warning: Each child in a list should have a unique "key" prop，但为什么呢？
下面是显示问题的代码：
const TabBarIcon = ({ onPress, options, iconName, isFocused }) => {
return (
<Pressable
onPress={() => onPress()}
testID={options.tabBarTestID}
浏览 1提问于2021-05-25得票数 1
回答已采纳
如何防止onPress函数在触发onLongPress时运行。当前当我长时间按下释放按钮后，onPress仍被触发。
const _handleOnpress =()=>{
console.log('onPressed triggered')
// other task only for onPress event
}
const _handleLongPress =()=>{
console.log('LongPress triggered')
// other task only for onLongPress event
}
浏览 4提问于2022-01-09得票数 2
我试图在TouchableObecity中的ReactNative中的文本中使用条件语句，但是屏幕上没有显示任何内容。文件是.tsx
这是我的密码
let count=1
<TouchableOpacity
onPress={() => {}}
>
<Text style={{
//
浏览 5提问于2022-08-13得票数 0
当我试图浏览整个页面时，我收到了这个黄色警告消息。 navigation.navigate is not a function 我的代码 export default (navigation) => (
<View>
<Card>
<Button
onPress={() => {
onSignIn().then(() => navigation.navigate("SignedIn")); //yellow warning message
}}
浏览 10提问于2018-12-24得票数 0
回答已采纳
我有一个带有TabBarIOS组件的简单。对于每个选项卡，我都有一个独立的.js文件，主TabBarIOS组件位于index.ios.js中。其他类是home.ios.js和contact.ios.js。
单击图标后，我希望应用程序显示相应的页面( home.ios.js或contact.ios.js)。但是，当我单击其中一个图标时，我会得到一个“预期的组件类，获取对象”错误。
到目前为止，TabBarIOS组件的呈现看起来还不错。我自己认为，在与其他.js文件的绑定中存在一个问题，或者在注入方面存在问题。
index.ios.js
var React = require('react
浏览 1提问于2016-10-18得票数 0
回答已采纳
1回答
我必须添加3个文本输入，但是当我按下“添加更多技能”按钮时，它添加了3个以上的文本输入，我只希望输入不超过3个。
这里是我输入处理程序的代码
const [inputs, setInputs] = useState([{ key: '', value: '' }]);
const addHandler = () => {
const addinputs = [...inputs];
addinputs.push({ key: '', value: '' });
浏览 3提问于2022-05-31得票数 0
我的ReactiveNative0.61.5应用程序在SplashScreen中加载了一个组件App.js。但是SplashScreen在加载后只停留几秒钟，并且是自动卸载的。我不知道为什么SplashScreen会自行卸载。
下面是App.js：
import SplashScreen from './src/components/splashscreen/SplashScreen';
export default class App extends React.Component {
state = {
}
render() {
return
浏览 2提问于2020-02-03得票数 0
回答已采纳
我是第一次接触reactnative
我正在使用FlatList和app.js，并使用StackNavigator在场景之间导航，如下所示：
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Content',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
浏览 35提问于2017-07-21得票数 0
回答已采纳
我正在尝试制作一个天气应用程序，当用户打开应用程序时，它会获取用户的位置。我得到了启动代码，它使用一个按钮，当按钮被按下时，它会获得用户的位置。如何更改代码，使其在应用程序打开时触发_onPress函数的内容？
我的起始代码：
import React, { Component } from "react";
import Button from "./../Button";
import styles from "./style.js";
const style = { backgroundColor: &#
浏览 1提问于2019-04-01得票数 0
1回答
这里缺少一些明显的东西。我得到了以下特殊的Invariant Violation: Element type is invalid：
export const ButtonWithComponent = (Comp) => props =>
<TouchableOpacity
onPress={props.onPress}
style={{
paddingHorizontal: 10,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems
浏览 0提问于2018-06-13得票数 1
回答已采纳
1回答
我试过搜索，但找不到答案。尝试过这个解决方案：，但似乎不起作用？
基本上，当用户向下滚动，并有一个锚点进入视图时，在该锚点下有一个DIV开始从0 -> 1改变不透明度。
我试过Jsfiddle，但只有当你滚动通过DIV，而不是锚，不知道我做错了什么时，它才开始改变不透明度。
var t = $("#trigger").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() > t)
{
$("#superclass").animate(
浏览 0提问于2015-03-01得票数 1
回答已采纳
我的ReactNative FlatList不是通过这个简单的实现来呈现的。
<FlatList style={{flex:1, backgroundColor:'red'}}
data = {this.state.users}
keyExtractor={item => item.key.toString()}
renderItem={({item}) => {
return (
<ChatUserCard key={
浏览 3提问于2018-12-09得票数 0
我有一个存储在JSON文件中的数据数组。它有ID、标题和描述。现在，我已经在我的ReactNative应用程序中列出了标题。我想在一个模式上显示每个标题的内容。我该怎么做呢？ 下面是我的代码，其中将出现模式，但描述不会出现在模式上。相反，它会给出一个未定义的错误。 import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
Modal,
Platform,
SafeAreaView,
ScrollView,
S
浏览 8提问于2021-08-30得票数 0
回答已采纳
大家好，我尝试在我的应用程序中运行这个教程，但我有一些错误。
我的代码是：
import React, {Component} from 'react';
import ReactNative from 'react-native';
import * as firebase from 'firebase';
const StatusBar = require('./components/StatusBar');
cons
浏览 2提问于2016-11-07得票数 2
我有一个第三方弹出窗口来显示消息。它有两个属性OffsetX和OffsetY。若要在浏览器中设置其位置，请执行以下操作。
现在，我在Button Click事件上调用此弹出窗口。我需要这个弹出式窗口就在我的按钮旁边，为此，我必须设置上面提到的弹出窗口的OffsetX和OffsetY属性。
我尝试在Button的Click事件中跟踪代码，
Popup.OffsetX = Button.Style.Item("Top") Popup.OffsetY = Button.Style.Item("Left")
但是Button.Style.Item("Top
浏览 2提问于2008-09-25得票数 0
我收到以下错误： Error: React.Children.only expected to receive a single React element child. 当我在ReactNative中使用'TouchableWithoutFeedback‘组件时： return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();}}>
<View style={styles.container}>
<Header /&g
浏览 64提问于2021-08-16得票数 0
2回答
我正在使用ReactNative，并且在传递参数时遇到了问题。怎样才能把计量器传给TextInput呢？错误是“必须在组件中呈现文本字符串”。
const [name, setName] = useState('')
return (
<View style = {styles.container}>
<Text>What is your name? </Text>
<TextInput
placeholder = 'Type something'
onChange
浏览 2提问于2020-12-17得票数 0
回答已采纳
1回答
为什么jQuery航点不起作用？我已经阅读了他们的文档，教程，所有的东西，但它不工作，我的完整代码是：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.waypoints.min.js"></script>
<script src="waypoint.js&#
浏览 0提问于2015-04-04得票数 0
我让document.addEventListener('mousedown', ...)向用户执行一些视觉反馈。但是，我还使用elem.addEventListener('click')动态创建了一些没有触发的元素。如果我删除了监听器，那么就会触发对元素的单击(或者如果我将文档的mousedown更改为单击事件)。这是为什么，以及如何解决这个问题？我确实需要文档来处理鼠标向下操作，并且仍然能够让元素接收到它们的点击/点击事件。
：如果您取消注释文档下鼠标事件，元素收到单击确定，否则单击元素永远不会触发。
小提琴更新了。取消注释第22/23行(设置位置)将不会触
浏览 4提问于2014-10-06得票数 2
回答已采纳
1回答
我在Android模拟器的ReactNative中显示我的自定义组件时遇到了问题。具体地说，显示为一条平坦的线条(高度接近0-请参阅紧接在“Authentication”下方的蓝色线条)，而它应该有一定的高度。如何使按钮具有高度？见下文。谢谢!
下面是我的代码：
App.js (与显示按钮相关的部分)
renderContent() {
return (
<Button onPress={() => firebase.auth().signOut()}>
Log Out
</But
浏览 13提问于2018-01-02得票数 1
1回答
我在ReactNative中有一个组件，它的属性是我想要的状态，但是我如何实现这一点呢？
import React, { useState } from "react";
import {
Alert,
Text,
TouchableHighlight,
ScrollView,
View,
} from "react-native";
const MyComponent = (props) => {
const [modalVisible, setModalVisible] = useState(true);
const _
浏览 1提问于2021-10-20得票数 1
回答已采纳
在模拟器iOS 10.3 iPhone 6上运行应用程序时，这样的异常没有问题，但在实际手机上运行时，我会得到这样的异常：
_reactNative.TouchableNativeFeedback.Ripple is not function. (In '_reactNative.TouchableNativeFeeedback.Ripple(_platform2.default.androidRippleColor)','_reactNative.TochableNativeFeedback.Ripple' is undefined)
当我对这个组件执行触摸时
浏览 1提问于2017-04-06得票数 1
如何触发keypress，使其模拟真实的用户行为？
如果我使用$('#input').trigger(jQuery.Event('keypress', {which: 65}))，我希望字母'a‘出现在输入中，但即使按键被触发，也不会出现任何内容。
是否可以在不直接更改输入的value的情况下显示按下的键？
演示：
浏览 2提问于2013-03-31得票数 3
回答已采纳
我已经创建了一个小脚本，用于在滚动时从右侧和左侧滑动一些元素(如“飞入”效果)。此外，我还想在页面加载后(在任何滚动之前)直接对元素应用这种效果。但结果是，我可以看到的前两个元素出现在页面的中心，而不是从右侧或左侧。有人能给我解释一下问题出在哪里吗？提前感谢！这是JS代码的一部分：
var FlyInBlocks = {
anim: function(_element) {
var elDirect = $(_element).data("direction"),
winScrollTop = $(window).scrollTop(),
浏览 0提问于2015-05-02得票数 0
1回答
我正在开发一个ReactNative iOS应用程序，它在您进入时从ReactNative页面开始，在页面跳转到本地页面后，本地导航栏意外地出现在页面上。
在进入原生页面之前，它看起来很好：
从本机页面返回后，在顶部有一个本机导航：
浏览 4提问于2021-09-10得票数 0
我在事件目标上使用scrollIntoView()，以确保它在具有overflow: scroll的父对象中是可见的，这主要是出于可访问性的原因。
我的问题是，我也有与此元素相关的单击事件，当单击事件也触发时，焦点e.target.scrollIntoView()正在阻止其他事件的触发。
这是我当前的示例：
require([
"dojo/query",
"dojo/on"
], function(query, on){
var el = query('#someElement');
el.on('cl
浏览 2提问于2015-02-10得票数 3
回答已采纳
我试着用自然的反应来做SlectBox。
为了使下拉菜单可以浮动，我在absolute位置设置了一个包装View的位置，然后在View中使用TouchableOpacity创建一个可点击的组件。它在Ios和Web上运行得很好，但在android上就不行了。谷歌上有很多解决方案，比如重新排序组件，给WrapperView一个WrapperView，或者使用Pressable等等，但是我找不到合适的解决方案。
宝贝是我的全部密码。您可以测试这个代码。
提前谢谢你。
import {
Animated,
Easing,
Platform,
StyleProp,
TextStyle
浏览 6提问于2021-08-25得票数 1
我是新的反应，并试图遵循.Apparently，这是一个较老版本的反应-本土化。因此，当代码不起作用时，我会跟随和调整代码。我在用ReactNative 0.41。
my index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
TabBarIOS
} from 'react-native';
import Featured from './Featured';
import Search from './Search'
浏览 3提问于2017-02-18得票数 0
回答已采纳
1回答
我正在尝试使用z-index对一个按钮和一个div进行分层。按钮出现在div的后面，而根据z-index，它应该在它的前面。下面是Firebug捕获的与button & div关联的样式元素：
请注意，按钮的z-index为2，div的z-index为1，两者都是position:relative。
完整的超文本标记语言在中。
浏览 3提问于2010-04-28得票数 1
回答已采纳
1回答
我有一个网页，上面写着main.jsp。我正在打开一个新窗口，使用：
var w=window.open(url);，它在新浏览器选项卡中打开second.jsp页面。
我试图触发元素的单击，类elementToClick，出现在second.jsp上，使用：
$(w.document).find('.elementToClick').trigger('click');
然而，这是行不通的。
我能够进行DOM操作，例如：
$(w.document).find('.elementToClick').html('someHtml')
浏览 2提问于2016-10-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
