反应原生 - 滑动以隐藏和显示新内容

Question

我正在 react 本机应用程序上创建项目列表。我想向左和向右滑动此列表中的每个项目。因此，当我向左滑动时，我想隐藏已渲染的视图并显示新元素。此外，当我向右滑动时，我想显示其他元素，这些元素将与向左滑动时呈现的元素不同。我找到了这个叫做"反应原生滑动手势"的库，但我无法弄清楚如何使用它显示和隐藏元素。我声明了一些项目，但是当我尝试显示它时，我收到一个错误，"找不到变量'item'"，也许你会向我解释我应该如何使用它来实际工作左右滑动。

import React, {Component} from 'react';
import {
    ScrollView,
    Text,
    View,
    Image,
    Button
} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import {List, ListItem} from "react-native-elements";
class Offers extends Component {
    constructor(props) {
        super(props);
        this.state = {
            myText: '',
            gestureName: 'none',
            icons: '',
            guardian: '',
            area: '',
            rooms: '',
            floor: '',
            market: '',
            year: '',
            pricePerMeter: '',
        };
    }

    onSwipeRight(gestureState) {
        this.setState({myText: 'You swiped right!'});
    }
    onSwipe(gestureName, gestureState) {
        const {SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
        this.setState({gestureName: gestureName});
        switch (gestureName) {
            case SWIPE_LEFT:
                this.setState({backgroundColor: 'blue'});
                break;
            case SWIPE_RIGHT:
                this.setState({backgroundColor: 'yellow'});
                break;
        }
    }
    onSwipeLeft(gestureState) {
        this.setState({
            guardian: item.offerGuardian, //items from const offers
            area: item.offerArea,
            floor: item.offerFloor,
            rooms: item.offerRooms,
            market: item.offerMarket,
            year: item.offerYear,
            pricePerMeter: item.offerPricePerMeter,
        })
    }
    render() {
        const config = {
            velocityThreshold: 0.3,
            directionalOffsetThreshold: 80
        };

        const offers = [
            {
                offerNumber: 'TEST912697',
                offerLocation: 'Warszawa Białołęka',
                offerStreet: 'ul. Bruszewska',
                offerType: 'Mieszkanie',
                offerStatus: 'Akt. Wewnętrzna',
                offerStatusColor: '#0FBEB2',
                offerAddDate: '2017-09-20 12:08:06',
                offerPrice: '2 450 000',
                photo: 'https://static.pexels.com/photos/164516/pexels-photo-164516.jpeg',
                offerGuardian: 'Adam Borek',
                offerTransactionType: 'sprzedaż',
                offerArea: '50 m2',
                offerRooms: '2 pokoje',
                offerFloor: '1 z 2',
                offerYear: '2005 rok',
                offerMarket: 'rynek pierwotny',
                offerPricePerMeter: '5000 zł/m2'
            },
        ];
        return (
            <ScrollView>
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-end',
                    alignItems: 'flex-end'
                }}>
                    <View style={{marginRight: 20, marginTop: 10}}>
                        <Button title="akcje"/>
                    </View>
                </View>
                {offers.map((item, i) => (
                    <View key={i}>
                        <List>
                            <GestureRecognizer
                                onSwipe={(direction, state) => this.onSwipe(direction, state)}
                                onSwipeLeft={(state) => this.onSwipeLeft(state)}
                                onSwipeRight={(state) => this.onSwipeRight(state)}
                                config={config}
                                style={{
                                    flex: 1,
                                    backgroundColor: this.state.backgroundColor
                                }}
                            >
                                <ListItem
                                    roundAvatar
                                    subtitle={
                                        <View style={{flexDirection: 'row'}}>
                                            <View>
                                                <Text>{this.state.myText}</Text>
                                                <Text>{this.state.guardian}</Text>
                                                <Text>{this.state.area}</Text>
                                                <Text>{this.state.floor}</Text>
                                                <Text>{this.state.market}</Text>
                                                <Text>{this.state.year}</Text>
                                                <Text>{this.state.pricePerMeter}</Text>
                                                <Image source={require('../../gfx/lel.jpg')}
                                                       style={{
                                                           height: 100,
                                                           width: 150
                                                       }}/>
                                            </View>
                                            <View style={{
                                                marginLeft: 5,
                                                flexDirection: 'row',
                                                flexWrap: 'wrap'
                                            }}>
                                                <View style={{width: 140}}>
                                                    <Text>
                                                        {item.offerLocation}
                                                        {"n"}
                                                        {item.offerStreet}
                                                        {"n"}
                                                        {item.offerType} na {item.offerTransactionType}
                                                        {"n"}
                                                        {item.offerNumber}
                                                    </Text>
                                                </View>
                                                <View>
                                                    <View style={{
                                                        justifyContent: 'flex-end',
                                                        width: 95,
                                                        height: 30,
                                                        backgroundColor: item.offerStatusColor
                                                    }}>
                                                        <Text style={{color: '#fff', textAlign: 'center'}}>
                                                            {item.offerStatus}
                                                        </Text>
                                                    </View>
                                                    <View style={{
                                                        flexDirection: 'column',
                                                        alignItems: 'flex-end',
                                                        flexWrap: 'wrap'
                                                    }}>
                                                        <Text style={{fontSize: 20}}>
                                                            {"n"}
                                                            {"n"}
                                                            {item.offerPrice}
                                                        </Text>
                                                    </View>
                                                </View>
                                            </View>
                                        </View>
                                    }
                                    onPress={() => this.props.navigation.navigate('OffersDetails')}
                                />
                            </GestureRecognizer>
                        </List>
                    </View>
                ))}
            </ScrollView>
        )
    }
}
export default Offers;

Answer 1

我建议尝试这个库react-native-swipe-list-view。它有据可查，易于用于任何类型的可滑动行。https://github.com/jemise111/react-native-swipe-list-view

基本概念是隐藏元素前面有一个元素。当您滑动时，它只会显示下面的隐藏元素。