询问-this.props.onPress不是函数。 （在“ this.props.onPress（e）”中，“ this.props.onPress”是“ this.page1”）

Question

我是本机反应的新手，我想将目标页面放入我的const中。 （我正在使用路由器流量） 有人可以帮我解释正确的方法，因为我经常遇到此错误。props.onPress在“按”菜单时不是函数。

我的一些示例代码：

import {Actions} from 'react-native-router-flux';

const list2 = [
  {
    name: 'Amy Farha',
    avatar_url:
      'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President',
    linearGradientColors: ['#FF9800', '#F44336'],
    menu: 'this.page1',
  },
  {
    name: 'Chris Jackson',
    avatar_url:
      'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman',
    linearGradientColors: ['#3F51B5', '#2196F3'],
    menu: 'this.page2',
  },
];

  page1() {
      Actions.page1()
  }


      <View style={styles.list}>
        {list2.map((l, i) => (
          <ListItem
            leftAvatar={{ title: l.name[0], source: { uri: l.avatar_url } }}
            key={i}
            onPress={l.menu}
            title={l.name}
            subtitle={l.subtitle}
            chevron
            bottomDivider
          />
        ))}
      </View>

预期结果：呈现列表后，我可以单击菜单并重定向到指定页面。

Answer 1

在React-Native中，OnPress期望eventHandler是一个“函数”。

对象“ l”的属性“菜单”不是函数。因此，它将引发异常。

如果您希望在组件中进行动态函数调用，请尝试类似的事情。

import {Actions} from 'react-native-router-flux';

const list2 = [
  {
    name: 'Amy Farha',
    avatar_url:
      'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President',
    linearGradientColors: ['#FF9800', '#F44336'],
    menu: 'page1',
  },
  {
    name: 'Chris Jackson',
    avatar_url:
      'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman',
    linearGradientColors: ['#3F51B5', '#2196F3'],
    menu: 'page2',
  },
];

class SomeClass extends Component {

  page1() {
      Actions.page1();
  }

  page2() {
    Actions.page2();
  }

  render() {
    return (
      <View style={styles.list}>
        {list2.map((l, i) => (
          <ListItem
            leftAvatar={{ title: l.name[0], source: { uri: l.avatar_url } }}
            key={i}
            onPress={this[l.menu]}
            title={l.name}
            subtitle={l.subtitle}
            chevron
            bottomDivider
          />
        ))}
      </View>
    );
  }
}
}

现在，功能“ page1”和“ page2”将被相应触发。