0
私はオブジェクトの配列で構成されicons.js
を言っている:マップ関数のonPressをカスタムコンポーネントに渡すにはどうすればよいですか?
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>
)
}
}
'onPress: 'bye''とは何か、そして' cells'はどこから来ますか?あなたはアイコンを意味しましたか? – azium
@azium haha、そのためにsryは、pickSinglWithcameraと同じように、関数として 'bye'を考慮します。 Yesセルは、アイコンで定義された2つのオブジェクトを保持するアイコンです。 –
あなたの問題があなたの関数を呼び出していないようです。 'onPress = {cell.onPress}'または 'onPress = {()=> cell.onPress()}'に変更してください。 – azium