Question

我正在尝试实现触摸释放功能以在React-native中打开模式。我实现了一个Flatlist来呈现数据数组，并且每个列表项都是TouchanbleOpacity以便处理项目上的事件。

import React, { Component } from 'react';
import { Container, List, ListItem, Button, Icon, Left, Body, Thumbnail} from 'native-base';
import { FlatList, Modal, Text, Image, View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
class Phones extends Component {
    constructor(props){
        super(props);
        this.state = {
            modalVisible: false,
            selectedImg: null,
            data:null,
            loading: true,
            error: false
        }
    }

    componentDidMount() {
        console.log("in didmount")
        fetch('https://randomuser.me/api/?seed=1&page=1&results=20')
            .then((response) => response.json())
            .then((response) => {
                console.log("response in didmount", response)
                this.setState({
                    loading: false,
                    data: response.results,
                    error: false,
                })
            })
            .catch((error) => {
                this.setState({ error: error,
                    loading: false, })
            })
    }

    static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: 'Phones',
            headerLeft: (
                <Icon
                    name='home'
                    onPress={() => navigation.navigate('Home')}
                />
            )
        }
    };

    displayModal = (image) => {
        console.log("display")
        this.setState({
            modalVisible: !this.state.modalVisible,
            selectedImg: image
        });
    }

    render() {
        return (
            <Container>
                {
                    this.state.loading === true ?
                        <ActivityIndicator size="large" color="#0000ff" />
                        :
                        <List>
                            <FlatList
                                data={this.state.data}
                                ListEmptyComponent={<Text style {styles.empty}>I'm Empty</Text>}
                                keyExtractor={(item, index) => index.toString()}
                                renderItem={({ item }) =>
                                    <TouchableOpacity
                                        delayLongPress={2000}
                                        onLongPress={() => this.displayModal(item.picture.large)}
                                        onPressOut={() => this.displayModal(item.picture.large)}>
                                            <ListItem
                                                onLongPress={() => this.displayModal(item.picture.medium)}
                                                onPressOut={() => this.displayModal(item.picture.medium)}
                                                avatar>
                                                <Left>
                                                    <Thumbnail source={{ uri: `${item.picture.thumbnail}` }} />
                                                </Left>
                                                <Body>
                                                    <Text>{item.name.first}</Text>
                                                    <Text note>{item.email}</Text>
                                                </Body>
                                            </ListItem>
                                        </TouchableOpacity>    
                                }
                            />
                        </List>
                }

                <Modal
                    animationType="fade"
                    transparent={false}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {
                        this.setState({modalVisible:false})
                    }}>
                    <View
                        style={styles.modalContainer}>
                        <View style={styles.modalView}>
                            <Image style={{ height: "100%", width: "100%" }} source={{ uri: this.state.selectedImg }} />
                        </View>
                    </View>
                </Modal>
            </Container>
        );
    }
}
export default Phones;

对于我添加的样式

const styles = StyleSheet.create({
    listItem: {
        // backgroundColor:"lightgrey",
        fontWeight: 'bold',
        fontSize: 20,
        margin: 10
    },
    modalContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-around'
    },
    modalView: {
        alignSelf: 'center',
        width: '85%',
        height: '40%',
        backgroundColor: '#fff',
        elevation: 20,
    },
    empty: {
        textAlign: 'center',
        padding: 30
      }
});

对于压机保持功能，我添加了onlongPress，并为隐藏模式添加了onPressOut事件。作为单个实体，一切正常。但是当我尝试合并所有元素（即flatlist，modal和events）时，我无法执行所需的功能。当我触摸并按住listitem模式时，而ontouch释放模式正在隐藏。

问题是..当只是在列表模式上滚动时，它似乎卡住了！！！就像onLongPress像onPress事件一样。我试图为其添加delayLongPress。但是似乎在这里不起作用。我正在尝试使其像instagram功能（即当用户按住图像模式打开并在释放模式隐藏时）。为此，我关注了本机文档，并对其进行了搜索，但没有成功！

可能无法正确执行功能或跳过某些逻辑。我也对事件如何运作感到困惑任何建议/解决方案/帮助将不胜感激。谢谢

onLongPress无法在react-native android中工作。实现模式的触摸保持释放

0 个答案: