Question

我是React-Native的新手。在这个论坛和其他人的帮助下，我能够创建一个小应用程序，其中的图像从ListView中的Firebase加载。我有一个问题......是否可以实现iOS照片中的功能？

我想要做的是，当用户触摸并保持ListView中的图像时，我想在下面的图像中使用选项（Like，Favorite）弹出图像。感谢任何帮助。

更新：我改变了这样的代码：

render() {
      return (

            <View style={styles.container}>

            <ListView dataSource={this.state.dataSource} renderRow={this._renderItem.bind(this)} enableEmptySections={true} removeClippedSubviews={true} style={styles.listview}> </ListView>
               </View>             
            );
}

_renderItem(item) {
    return (
            <ListItem item={item}/>
            );
 }

 ListItem.js

 class ListImages extends Component {
    render() {
        return (

            <MenuContext style={{flexDirection: 'row', padding: 5}}>
            <Menu onSelect={value => alert(`Selected number: ${value}`)}>
            <MenuTrigger>
            <Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
            </MenuTrigger>
            <MenuOptions>
            <View width={400} height={600} style={styles.listimagecontainer}>
            <Image resizeMode={Image.resizeMode.contain} style={{width: 350, height: 500}} source={{ uri: this.props.item.name }} />
            </View>
            <MenuOption value={1} text='Test' />

            </MenuOptions>
            </Menu>
            </MenuContext>
            );
   }
}

ListView中的图像显示正常。当我点击任何图像时，会打开包含图像的新视图。但是ListView中的下一个图像覆盖了视图，隐藏了一半以上的视图。我在这做错了什么？我还希望以正确的宽高比完整显示图像。感谢任何帮助。

使用建议的代码进行更新：

            <MenuContext style={{flexDirection: 'row', padding: 5}}>
            <Menu onSelect={value => alert(`Selected number: ${value}`)}>
            <MenuTrigger>
            <Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
            </MenuTrigger>
            <MenuOptions>
            <MenuOption onSelect={() => alert(`Like`)} text='Like' />
            <MenuOption onSelect={() => alert(`Share`)} text='Share' />
            <MenuOption onSelect={() => alert(`Delete`)} text='Delete' />
            </MenuOptions>
            </Menu>
            </MenuContext>

这是屏幕截图：

我想要做的是，ListView以400x250显示图像。当用户点击图像时，显示相同的图像（比如iOS中的325x500）并向用户显示如下选项 - 比如，分享，删除。感谢任何帮助。

本机iOS照片功能

0 个答案: