Question

我将尝试动态地在Flatlist组件中设置菜单，但问题是它仅打开了最后一个列表项菜单。我将如何为每个列表项打开一个单独的菜单。我的屏幕看起来像这样。

<FlatList
    data= {this.state.DataList}
    extraData={ this.state }
    renderItem={({item}) =>
        <Card>
            <TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.navigate('Comment', {id:item.id})}>

                <Image source={{uri: item.image}} style={{height: 200, width: '100%', position:'absolute'}}/>
                <Menu ref={this.setMenuRef} button={<Text onPress={() => this.showMenu(item.id)}>Show menu</Text>}>
                    <MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
                    <MenuItem onPress={this.hideMenu}>Menu item 2</MenuItem>
                    <MenuItem onPress={this.hideMenu} disabled>Menu item 3</MenuItem>
                    <MenuDivider />
                    <MenuItem onPress={this.hideMenu}>Menu item 4</MenuItem>
                </Menu>

            </TouchableOpacity>
        </Card>}
/>

，菜单声明为

import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';
_menu = null;

setMenuRef = ref => {
    this._menu = ref;
};

hideMenu = () => {
    this._menu.hide();
};

showMenu = (id) => {
    console.log(id);
    this._menu.show();
};

Answer 1

您可以使用这种方式

<Menu
    ref={ref => (this[`menu${index}`] = ref)}
    button={
       <Text>Show Menu</Text>
    }
>
    <MenuItem onPress={() => this[`menu${index}`].hide()}>
       Menu 1
    </MenuItem>
    <MenuDivider />
    <MenuItem onPress={() => this[`menu${index}`].hide()}>
       Menu 2
    </MenuItem>
</Menu>

如何在Flatlist中设置动态反应本机材料菜单

1 个答案: