将函数作为属性传递会在React Native中生成错误(onPress不是函数，“onPress”是Object的实例)
在React Native中，将函数作为属性传递时可能会出现错误，错误信息显示为"onPress is not a function, 'onPress' is an instance of Object"。这个错误通常发生在给组件的事件属性（如onPress）传递一个非函数类型的值时。
出现这个错误的原因是，React Native要求将事件处理函数作为属性传递给组件时，需要确保传递的是一个函数而不是其他类型的值。这是因为React Native的组件内部会将事件触发时的处理函数作为回调进行调用，如果传递的是非函数类型的值，就无法进行有效的回调调用，从而导致错误的发生。
为了解决这个问题，我们可以检查传递给事件属性的值是否为函数类型。如果不是函数类型，我们需要查找代码中的错误并修复它，确保传递的是一个合适的函数。具体的修复方法可能因代码而异，需要根据实际情况来进行调试和修复。
以下是一些可能导致此错误的常见原因和解决方法：
- 检查onPress属性是否正确传递给了组件，并确保传递的是函数类型而不是其他类型的值。
- 检查onPress属性所在的组件是否正确导入，并确保导入的组件是期望的组件。
- 检查onPress属性是否在组件内部正确声明，并确保在组件渲染时可访问到这个属性。
- 检查是否存在拼写错误或语法错误，例如将函数名拼写错误或未正确定义函数。
- 确保传递给onPress属性的函数在调用时不会抛出异常，以免导致回调调用中断。
如果你正在使用腾讯云的云计算服务，腾讯云提供了一系列与移动开发相关的产品和服务，包括云函数（SCF）、移动推送（Xinge Push）、移动直播（MLVB）等。你可以根据具体的需求选择合适的产品进行开发和部署。你可以在腾讯云的官方网站上找到更详细的产品介绍和文档，以帮助你更好地使用腾讯云的移动开发相关服务。
腾讯云移动开发相关产品和文档链接：
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 移动推送（Xinge Push）：https://cloud.tencent.com/product/xgpush
- 移动直播（MLVB）：https://cloud.tencent.com/product/mlvb
请注意，以上只是腾讯云提供的一些移动开发相关产品，你还可以根据具体需求和场景，进一步探索腾讯云提供的其他云计算产品和服务。
相关·内容
我正在尝试创建一个登录表单，但我得到了这个错误。 export default function LoginScreen(props) {
const [Submit, setSubmit] = React.useState('')
const windowWidth = Dimensions.get('window').width
const windowHeight = Dimensions.get('window').height
const [valuePass, setV
浏览 27提问于2021-02-11得票数 1
回答已采纳
我有问题的反应-本机onPress功能。只有当触摸事件实际触发时(我猜想)，即当我按下屏幕上的按钮时，onPress才能工作。但是，在调用render函数时，onPress似乎会自动触发。当我尝试手动按压时，它不起作用。
import React, { Component } from 'react';
import { PropTypes, Text, View ,Alert } from 'react-native';
import { Button } from 'react-native-material-design';
浏览 13提问于2017-02-19得票数 84
回答已采纳
我刚开始在react本地开发，我遇到了一个错误，我在我的应用程序中包含了抽屉导航，当它在内容视图中被点击时，边菜单栏打开，但当它在那里被点击时
<TouchableOpacity onPress={() =>this.props.navigation.toggleDrawer()}
style={{padding:10}}>
<Icon size={27} name='ios-menu' color='#fff' />
</Touchabl
浏览 1提问于2018-11-07得票数 1
回答已采纳
你好，我正在尝试制作一个步骤向导组件，但我有以下问题。我有以下文件：
import React from 'react';
import { View } from 'react-native';
import WizardStep from './WizardStep'
export default class Wizard extends React.Component {
constructor(props){
super(props);
this.state = {
questions: this.pr
浏览 5提问于2018-12-15得票数 0
回答已采纳
1回答
我创建了一个delete钩子来单独删除屏幕上的一些数据，但是每次加载钩子时，它都会删除页面上的所有条目。我试图能够点击一个图标并删除一个项目。我正在通过道具传递项目的id，然后调用我的delete函数，但是没有等待用户输入，钩子会删除数据库中的所有内容。任何帮助都是非常感谢的。
Hook
import { useContext } from 'react';
import { Context as CertificationContext } from '../context/CertificationContext';
import { Context as
浏览 0提问于2020-03-18得票数 0
回答已采纳
我需要在我的应用程序中使用切换开关(library git: dooboolab/react-native- switch - toggle )。我在react-native中使用typescript。当我为onPress gestureResponderEvent设置函数时，出现错误。上面写着: void类型不能赋值给boolean类型。
import React, {Component} from 'react';
import SwitchToggle form 'react-native-switch-toggle';
import {View} fro
浏览 0提问于2019-06-20得票数 1
伙计们，我对事件onPress有问题！如果我更改TextInput值函数_find()工作，但单击按钮事件无效。控制台中的错误：“警告:失败的道具类型:螺旋桨onPress在Button中被标记为必需，但它的值是undefined。”
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View,StyleSheet,Button } from 'react-native';
export default class inputText exte
浏览 0提问于2018-05-29得票数 0
回答已采纳
2回答
不知道为什么，但是当从另一个函数访问方法时，模式没有关闭。我可以在组件中对该方法进行控制台日志记录，但该方法就是不起作用。 这是closeModal()函数所在的主ReviewsScreen.js import React, {Component} from 'react';
import {Modal} from 'react-native';
import {TouchableOpacity} from 'react-native';
import {View, Text, StyleSheet} from 'react-nativ
浏览 14提问于2021-04-09得票数 0
1回答
我正在使用redux的react native，并希望将一个对象传递给另一个组件。我看不出我做错了什么，但我总是得到这样的错误：‘类型错误：_this.props.onPress不是一个函数。(在'_this.props.onPress(item)’中，'_this.props.onPress‘是未定义的)。下面是我的两个组件。
import React,{Component} from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
import Icon fr
浏览 0提问于2020-10-27得票数 1
我有一个问题，下面是我的代码： import React, { Component } from 'react';
import Meteor, {
withTracker,
} from 'react-native-meteor'
import { connect } from 'react-redux';
class CreateCommunityContainer extends React.Component{
static navigationOptions = {
title: 'Community
浏览 18提问于2019-02-12得票数 0
回答已采纳
很抱歉，我发现React Native令人困惑不已，令人费解。我使用下面的代码作为一个'helper‘脚本来保存可以被单独的组件访问的对象值。 LogContext.js import React, { useState } from 'react'
export const LogContext = React.createContext({
set: "en",
login: "false",
setLog: () => {},
});
export const LogContextProvider = (pr
浏览 9提问于2020-08-13得票数 0
我刚接触react-native和一般的react，我在阅读这篇文章时偶然发现了这一点：
避免在render中执行此操作。
<Text onPress={ () => this.doWork() }>Do Some Work</Text>
另外，要避免这种情况。
<Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>
由于render经常被调用，并且每次执行上述两项操作时，它都会创建一个新函数，因此不建议采用这种方式。如果要将参数传递给doWork函数，请创建子组件并将该函数
浏览 2提问于2020-12-16得票数 0
我使用react-native-maps super成功地运行了站点提供的代码。
然而，我不知道如何将我的自定义标记添加到代码中。
如何添加自定义标记。
当我添加我的标记时，它没有群集。
标记的数量超过1000+。
依赖项包括
"dependencies": {
"geolocation": "^0.2.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-geoloc
浏览 15提问于2020-02-09得票数 0
我想要记录我的输入，包括复选框选择，下拉选择和其他所有东西到一个警报框。我在捕获下拉选择和复选框选择进入状态和进一步将所有输入的详细信息放入警报框时遇到了问题。
以下是代码：
import * as React from 'react';
import {
Text, View, StyleSheet, TouchableOpacity, ScrollView, Button
}
from 'react-native';
import {
Header, Icon
}
from 'react-native-elements';
i
浏览 0提问于2019-02-08得票数 0
我有一个模式，当用户点击“获取GEO”按钮时弹出。在模式是一个按钮，它应该导航到UserScreen，但我得到的错误:无法读取属性‘导航’是未定义的。如果我把按钮放在class WelcomeScreen extends Component中，按钮就能正常工作。
提前谢谢。
代码如下：
WelcomeScreen：
import React, { Component } from "react";
import { TouchableOpacity, TouchableHighlight, Modal, StyleSheet, Text, View, Button, AppRe
浏览 1提问于2018-05-23得票数 0
我正在使用DrawerNavigator，我有3页：Router page、mainScreen和photos page。
我创建了一个标题导航栏区域，我使用这个<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>在mainScreen中打开抽屉菜单，并将其用于照片页面，在mainScreen中菜单是可以的，但是当我在照片页面中单击<TouchableHighlight onPress={() => this.props.navigatio
浏览 14提问于2017-07-20得票数 48
回答已采纳
2回答
我正在使用一个PhotoGrid库在react本机上填充我的应用程序上的照片列表。如何从呈现函数调用函数？当我在中的OnPress方法上调用一个名为"deva“的函数时，它会显示<Button onPress={()=>{this.deva()}}><Text>Bondan</Text></Button>错误。这是我的密码。
import React from 'react';
import { StyleSheet, Text, View, WebView, TouchableOpacity, Image, A
浏览 0提问于2018-04-02得票数 0
回答已采纳
3回答
我正在尝试将我的平板列表变成一个可重用的组件，但是我得到了一个错误。
item is not defined.
如何让我的onpress函数访问可重用组件中的项？
代码：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export const WebsiteFlatlist = (props) => {
return(
<FlatList
data={props.data}
浏览 2提问于2019-07-01得票数 0
回答已采纳
1回答
我目前正在学习“反应本地人”。
我只是构建了一个非常简单的应用程序来测试Button组件。
当我单击按钮组件时，控制台日志将按预期打印。但是，在打印出控制台日志之后，它会弹出以下错误。
**undefined is not an object (evaluating '_this2.btnPress().bind')**
我不知道是怎么回事？
有人能让我知道我做错了什么吗？
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-nativ
浏览 0提问于2017-11-12得票数 1
回答已采纳
我收到警告"setState(...)：只能更新已挂载或挂载的组件。“如果我离开包含此组件的屏幕，然后导航回该组件并尝试发送一条消息。我读过其他一些有类似问题的SO post，但它们都倾向于删除异步回调的侦听器。这里导致问题的代码在sendMessage()函数中，没有回调。
我不清楚为什么我的组件没有重新挂载。我在这里做错了什么？
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View
} from 'react-native&#
浏览 1提问于2016-06-02得票数 2
主屏幕：
import React from 'react';
import {View,Text, Image,StyleSheet,TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';
export default function Books({item}){
const firstUrl= 'https://carp-kenya.herokuapp.com';
var s
浏览 1提问于2020-10-26得票数 0
2回答
我想弄明白为什么每当我滑动我的<Drawer/>时Match和History都不出现。我在网上找了很多，但是找不到任何与此相关的东西。
这是SideMenu.js文件：
import React, {Component} from 'react';
import { Text, View} from 'react-native';
import {List, ListItem, Header} from 'react-native-elements';
import Container from "native-base/sr
浏览 8提问于2017-08-03得票数 0
3回答
我使用const来显示组件。现在，当我对const中的按钮使用react导航时，我看到这个错误:未定义的不是一个对象(计算'_this.props.navigation.navigate') 我尝试将navigation={this.props.navigation}添加到按钮以允许禁烟，但不起作用。 const WomenTab = () => (
<View>
<Button onPress={() => {
this.props.navigation.dispatch(St
浏览 16提问于2019-02-08得票数 2
回答已采纳
如果我写这个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
回答已采纳
1回答
我正在使用React Native和React Native Modal。
我想做的是输入任务详细信息(文本)到模式，并在隐藏模式点击传递输入的文本到主屏幕。
尝试将文本作为状态属性传递-尽管没有成功...
这是我的Modal：
export default class List extends Component {
constructor() {
super();
}
state = {
modalVisible: false,
taskDetails: ''
};
setModalVisible(visible) {
t
浏览 5提问于2019-08-22得票数 0
我实现了react原生路由器(react- native - router -flux)，在实现它之后，它工作得很好，但我需要从主页启动它，而不是我的第一个登录页面。
我实现了react原生路由器(react- native - Router -flux)的路由器代码，在实现之后它工作正常，但我需要从主页启动它，而不是我的第一个登录页面。
下面是我的代码：
路由器代码
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, TextInput,
浏览 0提问于2017-06-16得票数 0
1回答
我们在中看到了一种奇怪的行为，因此我们创建了一个简单的示例来演示。
我们有两个屏幕:A和B。
在屏幕A上，有两个按钮每个导航到屏幕B。第一个按钮传递参数id:1，第二个按钮传递id:2。
在屏幕B上，我们是控制台，在render()方法和componentDidMount()方法中记录入站参数。
如果我在屏幕A上单击id:1按钮，屏幕B上的参数输出将被更正为id:1在render()和componentDidMount()中。但是，如果我向后导航并非常快速地单击id:2的按钮，则记录的输出首先显示为id:1，然后显示为id:2。
首次单击：
渲染:1
componentDidMount: 1
浏览 1提问于2018-05-07得票数 1
回答已采纳
在我的React Native应用程序中，我使用库react-native-card-flip。
在类组件中，我按如下方式使用它：
<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
<TouchableOpacity style={styles.card} onPress={() => this.card.jiggle({ count: 2, duration: 100, progress: 0.05 })} ><Text>AB</Text
浏览 0提问于2021-03-30得票数 1
我刚接触react-native，它给了我这个错误(找不到变量: onClassifyPress )，我不知道如何解决它。我想要一个屏幕，上面有我在那里实现的两个按钮。我猜我在onClassiyPress函数中遗漏了一些东西，但我不确定这一点。请帮帮我。 import React, {
useState
} from 'react';
// Import core components
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
Alert
} from
浏览 15提问于2021-01-13得票数 0
想知道是否有人对如何解决这个问题有好的建议。获得了这个测试助手实用程序，我添加了一些类型到：
import { jest } from '@jest/globals'
import React from 'react'
// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>)
浏览 1提问于2022-03-15得票数 6
回答已采纳
2回答
我想用一个TouchableOpacity来播放和暂停。 我正在使用来自Firebase服务器的音频和react-native-sound来播放和暂停音频。以下是我的代码： constructor(props) {
super(props)
this.state = {
isPlaying: true
}
}
<TouchableOpacity
onPress= {() => {
const { isPlaying } = this.state;
var sound = new Sound(`${i
浏览 34提问于2019-08-06得票数 0
回答已采纳
1回答
引言
我有个密码：
import React, { Component } from 'react';
import { View, Button } from 'react-native';
export default function App() {
const myMethod = (name) => {
console.log(`Hello ${name}!`);
};
return (
<View>
<Button onPress={() => myMethod("Vi
浏览 9提问于2022-03-08得票数 2
回答已采纳
我想把这部分代码转换成一个可重用的组件，这样我就不用再写5遍了。
<TouchableOpacity onPress={console.log('pressed')}>
<Image
source={require('../img/button_australia.png')}
/>
</TouchableOpacity>
我制作的新组件如下所示：
import React from 'react';
import { Image, TouchableOpacity } from 'r
浏览 0提问于2016-11-25得票数 3
回答已采纳
我并没有在react-native上做过很多工作，但是formik和react-native-element在我的设置中并没有取得任何进展。我真的不确定我到底错过了什么。基本上，表单是不能提交的。我有一个可重用的按钮和由react原生元素组成的输入组件。表单不会被提交。出于好奇，我也尝试了RN的默认按钮来提交表单，但同样不起作用。我的沙箱是here。 我的设置非常简单，你可以在下面看到。任何帮助都会对我所缺少的东西有很大的帮助： FormInput.js： import React, { Component } from "react";
import { View, Sty
浏览 17提问于2019-12-08得票数 1
我有一个带有onPress事件的按钮，我只是想通过控制台记录按钮已被成功按下。
按钮在我的模板文件中，我已经将这部分代码提取到一个单独的文件中，我也为tyles做了同样的工作。
当我按下“添加”按钮时，与按下关联的add()函数不会触发，因此console.log不会显示。
但是console.log确实显示了屏幕的初始负载(我不知道这是为什么)
items.screen.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput } from 'reac
浏览 4提问于2018-01-30得票数 1
我只有加法和减号按钮。如果我使用来自useDispatch的react-redux，它将更新redux状态。问题是，当我使用store.dispatch()时，它不会更新状态。
组件
import React from 'react';
import { SafeAreaView } from 'react-native';
import moment from 'moment';
import { FlatList, Text, View, Button } from 'react-native';
import { Card,
浏览 3提问于2021-09-13得票数 0
3回答
React原生和箭头函数
、、、、
在React for web中，为了提高性能，我们不应该在onPress、onClick等情况下使用箭头函数。
这个规则对React Native也有效吗？
浏览 0提问于2018-07-06得票数 0
我仍然在尝试理解这个react导航5.0。仅供参考，我正在使用expo，现在从一个页面导航到另一个页面没有问题，问题是当我为headerRight设置导航时。我在Stack.Navigator中放入了headerRight，因为我想从其他屏幕上访问这个按钮。
所以基本上问题是，我想在headerRight中放置注销按钮，但是当我尝试放置navigation.navigate时，它显示未定义不是一个对象(计算为'_this.props')
然后我尝试调用一个函数(handleClick)，问题是未定义也不是一个对象。
我可以知道我的代码出了什么问题吗？
下面是我的完整代码：
浏览 26提问于2020-06-01得票数 7
回答已采纳
1回答
我需要你的帮助来解释一下在React Native代码中箭头函数和普通函数的区别。执行以下代码：
updateState = () => this.setState({myState: 'The state is updated'})
等同于这个：
updateState () {
this.setState({myState: 'The state is updated'})
}
如果答案是肯定的，为什么这段代码工作正常：
import React, {Component} from 'react';
import
浏览 0提问于2020-04-07得票数 0
我是React Native (和React)的新手，我正在尝试将一个函数作为道具传递给一个组件。
我的目标是创建一个组件，其中它的onPress功能可以由组件的实例化程序设置，因此它更具可重用性。
到目前为止，这是我的代码。
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import TouchableButton from './components/touchable-button';
export default
浏览 2提问于2018-03-29得票数 11
回答已采纳
我已经创建了一个平面列表，每个项目都有一个按钮，onPress将更改项目值。当我更改项目值时，问题就出现了，因为该项目也会意外地落到扁平表的最后一个位置。
这仅在React-Native版本57 +中发生
55.4版本没有遇到这个问题，但我需要将react-native升级到57+。
提前感谢您的帮助:)
以下是示例代码：
import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet, Button } from 'react-native';
class
浏览 3提问于2018-12-05得票数 0
1回答
我想当我单击access文件内的按钮时，移除Home文件内的月数组中的相同项。我该如何解决这个问题呢？ App.js此文件连接屏幕。 import {StyleSheet, View} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import Home from './src/components/Home';
import {NavigationContainer} from '@react-navigation/
浏览 9提问于2020-07-08得票数 0
2回答
我有这个组件 import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
const styles = StyleSheet.create({
container: {
display: 'flex',
justifyContent: 'center',
al
浏览 28提问于2021-02-09得票数 0
回答已采纳
我一直在使用创建-反应-本机应用程序创建的默认选项卡项目。
因此，我创建了自己的屏幕，在主组件(导出默认类)中可以访问this.props.navigation。从标题为“导航默认”的按钮导航(“搜索”)可以很好。
但是，经过多次尝试，我无法从headerRight中的按钮或自定义组件MyComponent中导航。
如何将警报更改为像主组件一样导航(“搜索”)？
import React from 'react';
import { Button, Dimensions, ScrollView, StyleSheet, Text, View } from 'react-
浏览 0提问于2018-10-01得票数 1
回答已采纳
我在我的React Native应用程序中使用了两次react-native-camera组件。我有一个<CameraFront/>组件和一个<CameraBack/>组件。它们分别位于不同的文件CameraFront.js和CameraBack.js中。仅供参考，<CameraFront/>和<CameraBack/>分别拍摄产品正面和背面的照片。它们不是指前置摄像头或后置摄像头。
问题是，当我尝试从<CameraBack/>组件拍摄照片时，它实际上正在从<CameraFront/>组件运行takePicture()函数
浏览 0提问于2017-03-24得票数 1
3回答
我已经创建了一个带有一些按钮的自定义抽屉组件，以导航到其他屏幕，但我得到了一个TypeError:当我单击some buttons.But时，未定义的不是对象(计算'_this.props')，如果删除自定义的抽屉组件，默认的抽屉就会正常工作。
如何解决这个问题？谢谢
抽屉
import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationNativeContainer} from '@
浏览 3提问于2020-01-28得票数 4
回答已采纳
2回答
我在用不同的方式开发反应导航。麻烦在我最后一次尝试的时候。
我正试图使用自定义组件从HomeScreen导航到DetailScreen (某种程度上的按钮被驱逐)。问题是："TypeError: Undefined不是一个对象(计算'this.prop.navigation.navigate')
有人能帮我理解这个问题吗？(注:我用的是反应导航5)
我给你不同的文件：
//fichier app.js
import 'react-native-gesture-handler'
import React from 'react';
im
浏览 0提问于2020-03-08得票数 1
回答已采纳
2回答
我正在从ReactJs转移到React-Native，并发现了这个函数结构
class Button extends React.Component<{
title: string,
onPress: () => any,
color?: ?string,
hasTVPreferredFocus?: ?boolean,
accessibilityLabel?: ?string,
disabled?: ?boolean,
testID?: ?string,
}> {
static propTypes = {
/**
* Text
浏览 2提问于2018-06-02得票数 5
如果我在下面编写onPress，当我单击该按钮时，控制台将编写测试。但是，如果我编写onPress()，它会在页面呈现时在控制台上写一个测试。写onPress()和生活有什么关系吗？这就是为什么它在页面呈现时不被调用的原因吗？
import React from 'react';
import { Button } from 'react-native';
const Screen = () => {
const onPress = () =>{
console.log('test')
}
浏览 7提问于2022-01-09得票数 0
回答已采纳
我在我的组件的状态中有这些属性
constructor(props) {
super(props);
this._onPress = this._onPress.bind(this);
this.state = {
receiptnumber: "",
text: "",
time: "",
isDateTimePickerVisible: false
};
}
我已经在按钮的点击事件上绑定了_onPress方法，它执行得很好。我在_onPress方法中调用了另一个方法_saveScheduleMe
浏览 10提问于2017-08-27得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
