我正在创建 React 本机应用程序，我在 FlatList 上的打开弹出模式框中遇到问题

Posted 2023-05-07

【中文标题】我正在创建 React 本机应用程序，我在 FlatList 上的打开弹出模式框中遇到问题

【英文标题】：I am creating React native application and i face the issue in open pop-up modal box on FlatList

【发布时间】：2021-08-28 03:45:51

【问题描述】：

我正在创建 React Native 应用程序，我有视频数据，我想与其他人分享我的视频数据信息， 我想通过单击该图标打开一个弹出模式框，其中包含此特定视频信息

<FlatList
    data=this.state.videoData
    renderItem=this.renderItemOffer
    keyExtractor=(it, index) => String(index)
    showsHorizontalScrollIndicator=false
/>

我正在使用平面列表来呈现数据

_onPressItem = (item) => 
    this._showModal(item);
;
_showModal = (selectedItem) => this.setState( isShareModal: true, selectedItem )

renderItemOffer = ( item ) => (
    <>
        <TouchableOpacity style= borderRadius: 25 
            onPress=() => this.props.navigation.navigate("VideoPlay")
        >
            <View style= paddingHorizontal: 20 >
                "Video Thumnail and video data"
              <TouchableOpacity
                    onPress=() => this._onPressItem(item) >
                    <Icon name='more-vertical' size=30 color=colors.black />
                </TouchableOpacity>
            </View>

        </TouchableOpacity>
        <Modal
            visible=(this.state.isShareModal)
            selectedItem=this.state.selectedItem>
            <View style=styles.modalView>
                <TouchableOpacity onPress=() => this.shareMessage(item) style= flexDirection: "row" >
                    <Text style= fontSize: 20 >Share</Text>
                </TouchableOpacity>
            </View>
        </Modal>
    </>
)

【问题讨论】：

嘿删除这些删除模态标签内的这些圆括号可能是这个问题 visible=this.state.isShareModal

【参考方案1】：

您只需声明一次 Modal，将其移出您的项目， 类似：

<>
<FlatList
    data=this.state.videoData
    renderItem=this.renderItemOffer
    keyExtractor=(it, index) => String(index)
    showsHorizontalScrollIndicator=false
/>
<Modal
            visible=(this.state.isShareModal)
            selectedItem=this.state.selectedItem>
            <View style=styles.modalView>
                <TouchableOpacity onPress=() => this.shareMessage(this.state.selectedItem) style= flexDirection: "row" >
                    <Text style= fontSize: 20 >Share</Text>
                </TouchableOpacity>
            </View>
</Modal>
</>