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中的主要组件：

导入icons.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>
    )
  }
}

Answer 1

箭头功能会立即返回，在您的情况下，您正在执行的操作会转换为以下内容：

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

这不会做任何事情，因为你没有执行该函数，你必须告诉函数执行

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

另一个解决方案是只分配没有箭头功能的函数，这有一个缺点，onPress不会被绑定到组件

onPress={cell.onPress}

如何将map函数中的onPress传递给自定义组件？

1 个答案: