TouchableOpacity OnPress不工作

Question

当单击onPress时，我试图调用一个使用道具传递的函数。下面是我的自定义组件。

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控制台会让我相信我的代码出了问题。