javascript - TouchableOpacity OnPress 不起作用

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;

Note: The props are being passed for sure as other values being passed are accessible

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

Answer 1

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

而不是

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

尝试:

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