1

我正在为我的应用程序使用 Draggable Flatlist（https://www.npmjs.com/package/react-native-draggable-flatlist），但我需要在右侧添加一个设置菜单（3 个垂直点）图标在每个列表项中，单击它会向我显示一个可单击的弹出框，但单击不适用于 Draggable 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
4

0 回答 0