单击React Native中的图标打开菜单

时间:2019-02-12 17:54:11

标签: react-native react-native-popup-menu

React Native

中单击图标时,我无法确定如何显示菜单

Expo Link

代码

_onPressItem = () => {
    this.setState({ opened: true });
    };

  render() {
    return (
      <View style={styles.container}>
        <ListItem
          title={
            <View>
              <Text style={{ fontWeight: "bold" }}>Mason Laon Roah</Text>
              <Text>9886012345</Text>
            </View>
          }
          subtitle={
            <View>
              <Text>445 Mount Eden Road, Mount Eden, Auckland. </Text>
              <Text>Contact No: 134695584</Text>
            </View>
          }
          leftAvatar={{ title: 'MD' }}
          rightContentContainerStyle={{ alignSelf: 'flex-start'}}
          rightTitle={<Icon type="material" color="red" name="more-vert" />}
        />
      </View>     
    );
  }

  getMenuView() {
    const { opened } = this.state;

    return (
      <MenuProvider style={{flexDirection: 'column', padding: 30}}>
        <Menu
          opened={opened}
          onBackdropPress={() => this.onBackdropPress()}
          onSelect={value => this.onOptionSelect(value)}>
          <MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />
          <MenuOptions>
            <MenuOption value={1} text='One' />
            <MenuOption value={2}>
              <Text style={{color: 'red'}}>Two</Text>
            </MenuOption>
            <MenuOption value={3} disabled={true} text='Three' />
          </MenuOptions>
        </Menu>
      </MenuProvider>
    );
  }

请让我知道如何将菜单与图标集成。

基本上所有项目都显示在 FlatList 中,其中每个项目都有其自己的菜单项

enter image description here

1 个答案:

答案 0 :(得分:3)

只需更新以下代码:

而不是:

    segment .data     ; or use .rodata for read-only data.
str1    db      "Hello", 0x0
str2    db      "Hellx", 0x0
fmt     db      "Comparison = %d", 0xa, 0x0

segment .text
    global main
    extern strcmp, printf
    default rel             ; RIP-relative addressing for [name] is what you want.

main:
    ; Create a stack-frame, re-aligning the stack to 16-byte alignment before calls
    push rbp
    mov rbp, rsp

    ; Prepare the arguments for strcmp.
    lea rdi, [str1]
    lea rsi, [str2]

    ; Call strcmp, return value is in rax.
    call strcmp

    ; Prepare arguments for printf.
    lea rdi, [fmt]
    mov esi, eax  ; int return value from strcmp -> 2nd arg for printf
    xor eax, eax  ; Indicate no floating point args to printf.

    ; Call printf
    call printf

    ; Return 0 (EXIT_SUCCESS), and destroy the stack frame.
    xor eax, eax
    leave            ; or just pop rbp because RSP is still pointing at the saved RBP
    ret

更新为:

rightTitle={<Icon type="material" color="red" name="more-vert" />}

因为此方法返回的视图不是菜单弹出窗口。

,而不是:

rightTitle={this.getMenuView()}

更新为:

<MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />

所以它不打印文本,而是显示图标。

我在您给定的链接上尝试了此代码,它有效。.