компонентный метод didnot вызывается методом onPress() TouchableHighlight

'use strict';

var React = require('react-native');
var {
  PropTypes,
  View,
  Text,
  Image,
  TouchableHighlight,
  Component
} = React;


var ResponsiveImage = require('react-native-responsive-image');
var styles = require('../../style');

class EventCard extends Component {
  static contextTypes = {
    nextPage: React.PropTypes.func.isRequired
  };
  constructor(props, context) {
    super(props, context);
  }
  render(){
    return(
      <TouchableHighlight underlayColor='gray' onPress={() => {this.onclicked()}}>
        <View style={styles.global.card}>
          <ResponsiveImage source={require('../resources/images/card.png')} initWidth="130" initHeight="110" style={{padding:5}} />
          <Text style={styles.global.cardTitle}>{this.props.cardItem.title}</Text>
        </View>
      </TouchableHighlight>
    );
  }
  onclicked(){
    this.context.nextPage();
  }
}

module.exports = EventCard;

метод onclicked не может быть вызван. что такое ошибка в моем коде? пожалуйста предложите меня. когда я нажимаю Touchablehighlights, никакой ответ не возвращается. метод nextPage () является родительским методом, который я сделал статическим в родительском классе.

1 ответ

  1. Мне пришлось значительно изменить ваш компонент, потому что у меня нет ресурсов и других методов, которые вы используете в качестве реквизита и стилей, но концепция та же. Я играл с ним, просто сделал простое изменение цвета на пресс-компоненте для хихиканья. Этот компонент импортируется в индекс.усвн.js (or index.андроид.js в вашем случае) like so: import {EventCard} from './component';где этот компонент находится в компоненте.js, и компонент.js и индекс.андроид.js находятся в той же папке.

    import React, { Component } from 'react';
    import {
      PropTypes,
      View,
      Text,
      Image,
      TouchableHighlight
    } from 'react-native';
    
    // I didn't bother installing dependencies.
    
    // var ResponsiveImage = require('react-native-responsive-image');
    // var styles = require('../../style');
    
    export class EventCard extends Component {
      static contextTypes = {
        // nextPage: React.PropTypes.func.isRequired
      };
      constructor(props) {
        super(props);
      }
      state = {
        color: 'black'
      }
    
      // This method takes the place of your onclicked method.
      changeColor = () => {
        let first = parseInt(Math.random() * 255);
        let second = parseInt(Math.random() * 255);
        let third = parseInt(Math.random() * 255);
        this.setState({
          color: 'rgba(' + first + ', ' + second + ', ' + third + ', 1)'
        });
      }
      render () {
        return(
          <TouchableHighlight underlayColor='gray'>
            <Second myColor={this.state.color} handlePress={this.changeColor} />
          </TouchableHighlight>
        );
      }
    }
    
    class Second extends React.Component {
      setNativeProps = (props: Object) => {
        this._root.setNativeProps(nativeProps);
      }
      render () {
        return (
          <Text ref={component => this._root = component} style={{color: this.props.myColor}} onPress={this.props.handlePress}>
            Second.
          </Text>
        );
      }
    }
    // I don't have your resources or other dependencies.
    
    // <View style={styles.global.card}>
    //   <ResponsiveImage source={require('../resources/images/card.png')} initWidth="130" initHeight="110" style={{padding:5}} />
    //   <Text style={styles.global.cardTitle}>{this.props.cardItem.title}</Text>
    // </View>
    
    // module.exports = EventCard;