マップ関数のonPressをカスタムコンポーネントに渡すにはどうすればよいですか？

Question

私はオブジェクトの配列で構成されicons.jsを言っている：

const icons =[ 
    { name: 'Camera', image: <Icon name='device-camera' size={70} />, onPress: pickSingleWithCamera}, 
{ name: 'Earth', image: <SimpleLineIcons name='camera' size={70} />, onPress: 'bye' } 

] 

picksinglWithCameraは関数である。

const pickSingleWithCamera =() => { 
    ImagePicker.openCamera({ 
     cropping: true, 
     width: 500, 
     height: 500, 
    }).then(image => { 
     console.log('received image', image); 
     this.setState({ 
     image: {uri: image.path, width: image.width, height: image.height}, 
     images: null 
     }); 
    }).catch(e => alert(e)); 
    } 

今、私はmain.jsの主なコンポーネントがあります。

をそれは、アイコンをインポートします。 jsファイル。 title.jsファイルもインポートします。

タイトル部品：

<Title 
      text={ focused ? focused.name : '' } 
      data={this.cells} 
      top={(SIZE + GUTTER) * 2} 
      visibility={this.text} 
     /> 

今ここではtitle.js次のとおりです。ここで

私が何をしようとしていますどのようなユーザーがテキスト（配列アイコンのname属性）、の各機能を押すたびですいわゆる。

残念ながら私はそれをやり遂げていません。そのためにスタックに来ました。

import React, { Component } from 'react' 
import { Animated, Text, TouchableOpacity, Alert, View } from 'react-native' 
import { HIDDEN, VISIBLE } from './animation-state' 

export default class Title extends Component { 
    constructor(props) { 
    super(props) 

    this.state = {} 
    } 

    action(text, top, visibility, data) { 
    return data.map((cell, i) => { 
     return (
     <Animated.View 
     key={i} 
      style={{ 
      position: 'absolute', 
      top, 
      left: 0, 
      right: 0, 
      opacity: visibility.interpolate({ 
       inputRange: [HIDDEN, VISIBLE], 
       outputRange: [0, 1], 
      }), 
      backgroundColor: 'transparent', 
      transform: [ 
       { 
       translateY: visibility.interpolate({ 
        inputRange: [HIDDEN, VISIBLE], 
        outputRange: [100, 0], 
       }), 
       }, 
      ], 
      }} 
     > 
      <TouchableOpacity onPress={() => cell.onPress}> 
      <Text 
       style={{ 
       fontSize: 40, 
       fontFamily: 'GillSans-SemiBold', 
       textAlign: 'center', 
       }} 
      > 
       {text} 
      </Text> 
      </TouchableOpacity> 
     </Animated.View> 
    ) 
    }) 
    } 

    render() { 
    const { text, top, visibility, data } = this.props 
    return (
     <View> 
     {this.action(text, top, visibility, data)} 
     </View> 
    ) 
    } 
} 

Answer 1

アロー機能では、次に変換をやっている、あなたの場合には、即時のリターンを持っている：

onPress={function(){return cell.onPress;}} 

あなたが関数を実行していないので、これは何もしません、あなたは機能を伝える必要があります

onPress={() => cell.onPress()} 

を実行するために別の解決策は、単に矢印機能せずに機能を割り当てることであろう、これはonPressが目にバインドされないことを欠点を持っていますeコンポーネント

onPress={cell.onPress}