如何將map函數傳遞給自定義組件？

我說icons.js其中包括對象的數組：如何將map函數傳遞給自定義組件？

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：

這裏就是我想要做的是，每當用戶按下文本（陣列圖標名稱屬性），各自的功能它被稱爲。

不幸的是我這樣做是不成功的，這就是爲什麼來到堆棧。

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> 
    ) 
    } 
}

來源

2017-07-16 YaSh Chaudhary

'onPress：'bye''應該做什麼，'cells'從哪裏來。你的意思是圖標？ – azium

@azium哈哈，爲此，只考慮pickSinglWithcamera是'再見'作爲一種func。是單元格是圖標中定義的兩個對象的圖標。 –

以及它看起來像你的問題是不叫你的功能。或者換成'onPress = {cell.onPress}'或'onPress = {（）=> cell.onPress（）}' – azium

箭頭功能有立竿見影的回報，你的情況，你在做什麼的含義如下：

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

，因爲你沒有執行功能這將做什麼，你要告訴函數執行

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

另一種解決方案是隻分配功能沒有箭頭的功能，這有onPress不會被綁定到日下跌e組件

onPress={cell.onPress}

來源

2017-07-17 04:42:03 Jaime

如何將map函數傳遞給自定義組件？

回答

相關問題