Javascript 图标单击“不在可拖动平面列表上工作”

我正在为我的应用程序使用Dragable Flatlist（），但我需要在每个列表项的右侧添加一个设置菜单（3个垂直点）图标，单击该图标会显示一个可单击的弹出框，但单击不适用于Dragable Flatlist

有人能帮我吗

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity
} from 'react-native';
import {SwipeableFlatList} from 'react-native-swipeable-flat-list';
import DraggableFlatList from 'react-native-draggable-flatlist';
import { ListItem, Icon } from 'react-native-elements';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Menu, {
  MenuProvider,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-popup-menu';

class Fav extends Component {
  state = {
    data: [
        { accName: 'Account 5', accBalance: '5000', isOpen: false },
        { accName: 'Account 6', accBalance: '6000', isOpen: false },
        { accName: 'Account 7', accBalance: '7000', isOpen: false },
        { accName: 'Account 8', accBalance: '8000', isOpen: false }
    ]
  }


  onTriggerPress(index) {
    const list = [...this.state.data];
    list[index].isOpen = true;
    this.setState({ list });
  }

  onBackdropPress(index) {
    const list = [...this.state.data];
    list[index].isOpen = false;
    this.setState({ list });
  }

  onOptionSelect(value, index) {
    alert(`Selected number: ${value}`);
    const list = [...this.state.data];
    list[index].isOpen = false;
    this.setState({ list });
  }

  renderItem = ({ item, index, move, moveEnd, isActive }) => {
    return (
      <TouchableOpacity
        onLongPress={move}
        onPressOut={moveEnd}
      >

      <ListItem
        title={
          <View>
            <Text style={{ fontWeight: 'bold' }}>{item.accName}</Text>
            <Text>{item.accBalance}</Text>
          </View>
        }
        leftAvatar={{ title: 'CURR' }}
        rightContentContainerStyle={{ alignSelf: 'flex-start' }}
        rightTitle={this.getMenuView(index, item.isOpen, item)}
      />
      </TouchableOpacity>
    )
  }

  /*componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.data
    })
 }*/

  render() {
    console.log('666>>>',this.state.data);
    return (
      <View style={{ flex: 1 }}>
        {this.state.data.length ? <DraggableFlatList
          data={this.state.data || null}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable- item-${item.accBalance}`}
          scrollPercent={5}
          onMoveEnd={({ data }) => this.setState({ data })}
          ItemSeparatorComponent={() => <View style={{ marginBottom: 5 }} />}
        /> : <Text>BLANK DATA</Text>}
     </View>
    )
  }


  getMenuView(index, isOpen) {
    return (
      <MenuProvider style={{ flexDirection: 'column', padding: 10 }}>
        <Menu opened={isOpen}>
         <MenuTrigger
            onBackdropPress={() => this.onBackdropPress(index)}
            onSelect={value => this.onOptionSelect(value, index)}
         >
            <Icon
              onPress={() => this.onTriggerPress(index)}
              type="material"
              color="red"
              name="more-vert"
            />
          </MenuTrigger>
          <MenuOptions>
            <MenuOption value={1} text="Move to AA" onPress={() => this.handlePress(item)} />
          </MenuOptions>
        </Menu>
      </MenuProvider>
    );
  }
}
export default Fav

import React，{Component}来自'React'；
进口{
安全区域视图，
样式表，
滚动视图，
看法
文本，
状态栏，
可触摸不透明度
}从“反应本机”；
从“react native SwipeableFlatList”导入{SwipeableFlatList}；
从“react native DragableFlatlist”导入DragableFlatlist；
从“react native elements”导入{ListItem，Icon}；
进口{
标题，
学习重新链接，
颜色，
调试说明，
重新加载指令，
}来自“react native/Libraries/NewAppScreen”；
导入菜单{
MenuProvider，
菜单选项，
菜单选项，
梅努特里格，
}从“反应本机弹出菜单”；
类Fav扩展组件{
状态={
数据：[
{accName:'Account 5'，acccbalance:'5000'，isOpen:false}，
{accName:'Account 6'，accBalance:'6000'，isOpen:false}，
{accName:'Account 7'，accBalance:'7000'，isOpen:false}，
{accName:'Account 8'，accBalance:'8000'，isOpen:false}
]
}
昂蒂格出版社（索引）{
const list=[…this.state.data]；
列表[索引].isOpen=true；
this.setState（{list}）；
}
onBackdropPress（索引）{
const list=[…this.state.data]；
列表[索引].isOpen=false；
this.setState（{list}）；
}
onOptionSelect（值、索引）{
警报（`Selected number:${value}`）；
const list=[…this.state.data]；
列表[索引].isOpen=false；
this.setState（{list}）；
}
renderItem=（{item，index，move，moveEnd，isActive}）=>{
返回(
)
}
/*组件将接收道具（下一步）{
这是我的国家({
数据：nextrops.data
})
}*/
render（）{
console.log（'666>>>'，this.state.data）；
返回(
{this.state.data.length？`draggable-item-${item.accBalance}`}
滚动百分比={5}
onMoveEnd={（{data}）=>this.setState（{data}）}
ItemSeparatorComponent={（）=>}
/>：空白数据}
)
}
getMenuView（索引，等参）{
返回(
this.onBackdropPress（index）}
onSelect={value=>this.onOptionSelect（值，索引）}
>
this.onTriggerPress（索引）}
type=“材料”
color=“红色”
name=“更多垂直”
/>
此.手按（项目）}/>
);
}
}
导出默认Fav

向我们共享您的代码我已将代码共享添加到我们您的代码我已添加代码