Question

我正在尝试调用一个在onPress单击时使用props传递的函数。以下是我的自定义组件。

DrawerItem.js

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity
} from 'react-native';
import FastImage from 'react-native-fast-image';

const DrawerItem = (props) => (
  <View style={styles.drawerItemContainer}>
    <TouchableOpacity onPress={props.onPress}>
      <FastImage source={props.icon} style={styles.icon}  />
    </TouchableOpacity>
    <TouchableOpacity onPress={props.onPress}>
      <Text style={styles.drawerItemText} >{props.title}</Text>
    </TouchableOpacity>
  </View>
);

export default DrawerItem;

下面是我使用DrawerItem组件的自定义组件：

SideMenu.js：

import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {NavigationActions, SafeAreaView} from 'react-navigation';
import {ScrollView, Text, View, StyleSheet,ImageBackground, StatusBar, TouchableOpacity} from 'react-native';
import FastImage from 'react-native-fast-image';
import DrawerItem from './DrawerItem';


class SideMenu extends Component {

  //This is the function which is not being called
  navigateToScreen = (route) => () => {
    console.log('inside navigate screen');
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View style={styles.container}>
        <ImageBackground source={require('../../resources/images/drawer_background.png')} style={{width: '100%', height: '100%'}}>
        <View style={styles.drawer}>
            <View style={styles.header}>
                <FastImage style={styles.profilePicture} source={{uri: 'https://assets.entrepreneur.com/content/3x2/1300/20150406145944-dos-donts-taking-perfect-linkedin-profile-picture-selfie-mobile-camera-2.jpeg'}}/>
                <View style={styles.headerDetails}>
                    <Text style={styles.displayName}>Jen William</Text>
                    <Text style={styles.email}>jen@williams.com</Text>
                </View>
            </View>

            <View style={styles.drawerBody}>
               //Below is how I am pasing navigateToScreen function 
              <DrawerItem onPress={() => this.navigateToScreen('Profile')}  icon={require('../../resources/images/myprofile_icon.png')} title='My Profile'/>
              <DrawerItem  icon={require('../../resources/images/cardrequest_icon.png')} title='Card Requests'/>
              <DrawerItem  icon={require('../../resources/images/search_icon.png')} title='Search'/>
              <DrawerItem  icon={require('../../resources/images/add_icon.png')} title='My Cards'/>
              <DrawerItem  icon={require('../../resources/images/signout_icon.png')} title='Sign Out'/>
            </View>
        </View>
        </ImageBackground>
      </View>
    );
  }
}

SideMenu.propTypes = {
  navigation: PropTypes.object
};

export default SideMenu;

注意：在传递其他值时，肯定会传递道具可以访问

有人可以告诉我我做错了吗？

Answer 1

这可能是一个具有约束力的问题。

而不是

 onPress={() => this.navigateToScreen('Profile')}

尝试：

onPress={this.navigateToScreen('Profile')}

Answer 2

检查你的功能：

navigateToScreen = (route) => () => {
  console.log('inside navigate screen');
    const navigateAction = NavigationActions.navigate({
    routeName: route
  });
  this.props.navigation.dispatch(navigateAction);
}

应该是这样的：

navigateToScreen = (route) => {
 console.log('inside navigate screen');
  const navigateAction = NavigationActions.navigate({
  routeName: route
 });
 this.props.navigation.dispatch(navigateAction);
}

不应该有额外的括号

Answer 3

好吧！这可能很有趣。但是相信我。我遇到了同样的错误，我的代码如下所示，

<TouchableOpacity onPress = {() => console.log('Hi')}>
  <Text> Click Me! </Text>
 </TouchableOpacity>

15分钟后，我刚从控制台退出以重新启动我的应用程序。在按下我的npm控制台时，只抛出了所有控制台日志。

是的，有时Windows计算机上的npm控制台会发疯，使我相信我的代码有问题。

Answer 4

这可能不起作用，具体取决于您如何运行代码。使用 onClick 试试这个

<TouchableOpacity onClick={...}>
...
</TouchableOpacity>

TouchableOpacity OnPress无效

4 个答案: