Dynamic loop creation DOM，passing a callback function as a component property，cannot be obtained in the component

[no5no6]

I packaged a component, import the component,dynamic loop creation DOM , Passing a callback function as the component property，In packaged component, the property is undefined，I use the method is wrong？

in AnimateImage.js
This line of code is wrong

// print undefined, If don't create DOM dynamically, this property can be obtained.
console.log(onPress, 'onPress');  

Game.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableWithoutFeedback,
  Text,
  View

} from 'react-native';

import AnimateImage from '../control/AnimateImage';
import _ from 'lodash';

export default class Game extends Component {
  constructor(props){
    super(props);
    let {imageArray} = this.props;
    this.state = {
      rows: [],
      imageArray: imageArray || [],
    };
  };

  componentDidMount(){
    this.createPokers();
  };

  onPress = () => {
    console.log('sucess');
  }

  //imageArray = [1,2,3,4]
  createPokers = () => {
    let self = this;
    let rows = imageArray.reduce(function(memo, value){
      memo.push(
          <AnimateImage
            key={'backImage'+ value}
            style={{left: 0 - value * 120}}
            animate="bounceInLeft"
            imageHeight={220}
            imageWidth={150}>
            onPress={self.onPress}
          </AnimateImage>
      );
      return memo;
    }, []);
    this.setState({rows: rows});
  };


  render() {
    return (
      <View>
        <View ref="viewPoker" style={[styles.viewRow, styles.AnimateImage]}>
          {this.state.rows}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewRow: {
    flexDirection: 'row',
    position: 'absolute',
  },
  AnimateImage: {
    left: 150,
    top:300,
  }
});

AppRegistry.registerComponent('Game', () => Game);

AnimateImage.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  TouchableWithoutFeedback,
  Text,
  View
} from 'react-native';

import * as Animatable from 'react-native-animatable';

export default class AnimateImage extends Component {
  constructor(props){
    super(props);
    let {animate, text, imageHeight, imageWidth, style, onPress} = this.props;
    console.log(onPress, 'onPress');  // print undefined
    this.state = {
      animate: animate || '',
      imageHeight: imageHeight || 300,
      imageWidth: imageWidth || 200,
      style: style || {},
      callback: onPress || {}
    };
  };

  buttonPress = () => {
    this.refs.view.fadeOutUpBig(1500).then((endState) => {
      this.state.callback();  
    });
  };

  render() {
    return (
      <TouchableWithoutFeedback onPress={this.buttonPress}>
        <Animatable.View animation={this.state.animate} ref="view">
          <Image
            style={[this.state.style, {height: parseInt(this.state.imageHeight), width:parseInt(this.state.imageWidth)}]}
            source={require('./../../src/images/poker-back.png')}
          />
        </Animatable.View>
      </TouchableWithoutFeedback>
    );
  }
}



AppRegistry.registerComponent('AnimateImage', () => AnimateImage);

[ide]

@facebook-github-bot stack-overflow

[ghost]

Hey @LittleChild and thanks for posting this! @ide tells me this issue looks like a question that would be best asked on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only. Will close this as this is really a question that should be asked on SO.

[no5no6]

I see. Thank you.