Question

'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（）方法是父方法，我在父类中创建了静态。

Answer 1

我必须大大修改你的组件，因为我没有你用作道具和样式的资源和其他方法，但概念是一样的。我玩弄它，只是在印刷机组件上做了一个简单的颜色改变，为咯咯笑。这个组件被导入index.ios.js（或者你的情况下是index.android.js），如下所示：import {EventCard} from './component';这个组件驻留在component.js中，而component.js和index.android.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;

组件方法没有被TouchableHighlight的onPress（）方法调用

1 个答案: