将函数传递给ReactNative Library ActionButton

时间:2017-10-12 17:41:01

标签: react-native

背景

我在React-Native应用程序中使用xotahal/react-native-material-ui材料设计。我已经在ActionButton中实现了多个按钮。我无法在文档中找到解释如何使用它的任何地方。我能够在git repo中找到该组件并管理获取按钮以进行渲染但我无法触发onClick()

示例

单击主蓝色按钮时会出现按钮。

enter image description here

问题

将函数传递给这些按钮的正确方法是什么,或者在文档中解释的是什么?

代码

<ActionButton
    actions={[ 
        { icon: 'note-add', label: 'Add', onPress: () => this.toggleSearch() },
        { icon: 'save', label: 'Save', onPress: () => this.handleOnSave() },]}

/&GT;

toggleSearch() {
        console.log('################## HEY SEARCH WORKS ##########################');

    }

问题是单击按钮时没有触发任何函数。

如果有人知道文档中的解释,我将不胜感激。

1 个答案:

答案 0 :(得分:1)

ActionButton actions道具需要一个形状为{icon, label, name}的对象。如果要处理onPress,则需要将其定义为组件的prop,而不是action对象。

示例

<ActionButton
    actions={[ 
        { icon: 'note-add', label: 'Add' },
        { icon: 'save', label: 'Save'}]}
    onPress={(text) => this.onPress(text)}
/>

// ...

onPress(text) {
  switch(text) {
    case:
      // do something on this case
      break;
    case:
      // do another thing on this case
      break;
  }
}