Абсолютно правые элементы не отображаются при перелистывании в списке - PullRequest
Новая
       24

Абсолютно правые элементы не отображаются при перелистывании в списке

0 голосов
/ 16 марта 2020

Редактировать: Хорошо, похоже, проблема в моем списке элементов, поэтому я добавляю код этого элемента ниже (моя закуска работает нормально)

Пользовательский элемент: 

// components/MyItem.js

import React from 'react'
import { StyleSheet, Image, View, Text, Platform, Animated, TouchableOpacity } from 'react-native'
import Moment from 'react-moment'
import { Ionicons } from '@expo/vector-icons'
import Swipeable from 'react-native-gesture-handler/Swipeable'

class MyItem extends React.Component{

    state= {
        deleteItem: false,
    }

    render(){
        const { myItem, displayDetailsForMyItem, itemType } = this.props
        let showType = false
        let type = ""
        if (itemType === "Stuff") {
            showType = true
            type = myItem.type
        }

        let ptfPrefix
        (Platform.OS === 'android') ? ptfPrefix = 'md-' : ptfPrefix = 'ios-'
        const calIconName = ptfPrefix + 'calendar'
        const titleIconName = ptfPrefix + 'create'
        const pplIconName = ptfPrefix + 'contact'
        const trashIconName = ptfPrefix + 'trash'

        const RightActions = (progress, dragX) => {
            const scale = dragX.interpolate({
              inputRange: [-100, 0],
              outputRange: [0.7, 0]
            })

            return (
                <>
                    <TouchableOpacity onPress={() => this.props.deleteItem(myItem.key, this.props.itemType)}
                    style= {{}}>
                        <View
                            style={{ flex:1, backgroundColor: 'red', justifyContent: 'center', marginTop: 5, marginBottom: 5}}>
                            <Animated.Text
                            style={{
                                color: 'white',
                                paddingHorizontal: 25,
                                marginTop: 5,
                                fontWeight: '600',
                                transform: [{ scale }]
                            }}>
                            <Ionicons name={trashIconName} size={40} color='white' />
                            </Animated.Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.props.deleteItem(myItem.key, 'toto')}>
                        <View
                            style={{ flex: 1, backgroundColor: 'orange', justifyContent: 'center', marginTop: 5, marginBottom: 5 }}>
                            <Animated.Text
                            style={{
                                color: 'white',
                                paddingHorizontal: 20,
                                fontWeight: '600',
                                transform: [{ scale }]
                            }}>
                            <Ionicons name='md-create' size={40} color='white' />
                            </Animated.Text>
                        </View>
                    </TouchableOpacity>
                </>
            )
        }

        return(
            /*<TouchableOpacity 
                style={styles.main_container}
                //onPress={() => displayDetailsForMyItem(myItem.key)}
            >*/
                <View style={styles.main_container}>
                    <View style={styles.first_line}>
                        <View style={styles.left_part_container}>
                            <Image style={styles.date_bg} source={require('../assets/icons/list_bg.png')} />
                            <View style={styles.date_container}>
                                <Ionicons name={calIconName} style={styles.top_left_elmnts} />
                                <Moment style={styles.top_left_elmnts} element={Text} format="DD/MM/YYYY" date={myItem.date} />
                            </View>
                        </View>
                        <View style={styles.right_part_container}>
                            <Text style={styles.top_right_elmnts}>{myItem.title}</Text>
                            <Ionicons name={titleIconName} style={styles.top_right_elmnts} />
                        </View>
                    </View>

                    <View style={styles.main_data}>
                        <Text style={styles.main_text}>
                            {(this.props.itemType === 'Money') ? myItem.amount + " €" : myItem.quantity + " Objets"}
                        </Text>
                    </View>

                    <View style={styles.last_row}>
                        <View style={styles.left_part_container}>
                            <Ionicons name={pplIconName} style={styles.btm_left_elmnts} />
                            <Text style={styles.btm_left_elmnts}>{myItem.people}</Text>
                        </View>
                        { showType &&
                        <View style={styles.right_part_container}>
                            <Image style={styles.date_bg} source={require('../assets/icons/list_bg_type.png')} />
                            <View style={styles.date_container}>
                                <Text style={styles.btm_right_elmnts}>{type}</Text>
                                <Ionicons name={calIconName} style={styles.btm_right_elmnts} />
                            </View>
                        </View>
                        }
                    </View>
                </View>
            //</TouchableOpacity>
        )
    }
}

const styles=StyleSheet.create({
    main_container: {
        height: 100,
        flex: 1,
        marginTop: 2,
        marginBottom: 2,
        backgroundColor: '#465881'
    },
    top_left_elmnts: {
        marginLeft: 10,
        fontSize: 15,
        color: 'white'
    },
    top_right_elmnts: {
        marginRight: 10,
        fontSize: 15,
        color: 'white'
    },
    btm_left_elmnts:{
        marginLeft: 10,
        fontSize: 15,
        color: 'white'
    },
    btm_right_elmnts: {
        marginRight: 10,
        fontSize: 15,
        color: 'white'
    },
    first_line: {
        flexDirection: 'row',
        width: '100%',
        flex: 2,
        marginTop: 4
    },
    date_bg: {
        position: 'absolute'
    },
    date_container: {
        position: 'absolute',
        flexDirection: 'row',
        alignItems: 'center'
    },
    left_part_container: {
        width: '50%',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    right_part_container: {
        width: '50%',
        justifyContent: 'flex-end',
        flexDirection: 'row',
        alignItems: 'center'
    },
    main_data: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 6
    },
    main_text: {
        fontSize: 25,
        margin: 10,
        color: '#FB5B5A'
    },
    last_row: {
        flexDirection: 'row',
        flex: 2,
        width: '100%',
        marginBottom: 4
    }
})

export default MyItem

Как и просили, добавив ссылку на выставку, только здесь .

Я пытаюсь использовать пример использования swipelist, найденного в net ( здесь ). Когда я непосредственно тестирую на своем телефоне (с Expo), он работает совершенно нормально, но когда я пытаюсь повторно использовать код в своем собственном коде, я вижу только часть элементов, которые должны отображаться.

подробная проблема: когда я провожу пальцем слева, я вижу текст: «влево», так что здесь все в порядке. Когда я проводю справа, я должен видеть 2 квадрата с текстом в нем, но ни один из них не отображается (это касается функции _renderHiddenItem = (data, rowMap).

Вот мой код: 

// components/Test.js

import React from 'react'
import { StyleSheet, View, Image, Platform, ActivityIndicator, Text } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { Ionicons } from '@expo/vector-icons'
import StuffData from '../dbaccess/StuffData'
import MoneyData from '../dbaccess/MoneyData'
import Moment from 'react-moment'
import MyItem from './MyItem'
import SwipeValueBasedUi from '../functions/SwipeValueBasedUI'

import { SwipeListView } from 'react-native-swipe-list-view';

class Test extends React.Component {

    constructor(props) {
        super(props)

        this.state = { 
            dataList: [],
            isLoading: true
        }
    }

    _initData() {
        const type = this.props.route.params?.type ?? 'Money'
        let myObject

        if (type === 'Money'){
            myObject = new MoneyData()
        } else {
            myObject = new StuffData()
        }

        this.setState({
            mydataObject: myObject
        })

        myObject.getData().then(val => {
            this.setState({
                dataList: val,
                isLoading: false,
            })
        })

        myObject.total().then(val => {
            this.setState({
                total: val
            })
        })
    }

    _updateNavigationParams() {
        const navigation = this.props.navigation
        const type = 'Money'

        let addIconName
        addIconName = ((Platform.OS == 'android') ? 'md-add' : 'ios-add')


        if (Platform.OS === "ios" && type !== 'People'){
            navigation.setOptions({
                        headerRight: () => <TouchableOpacity style={styles.add_touchable_headerrightbutton}
                                        onPress={() => this._addItem()}>
                                        <Ionicons name={addIconName} style={styles.add_image} />
                        </TouchableOpacity>
                })
            }
    }

    componentDidMount(){
        this._updateNavigationParams()
        this._initData()
    }

    _addItem = () => {
        const type = 'Money'

        if (type === 'Money'){
            this.props.navigation.navigate('AddMoney')
        } else {
            this.props.navigation.navigate('AddStuff')
        }
    }

    //Android dedicated
    _displayFloatingActionButton() {
        const type = 'Money'

        if (Platform.OS === 'android' && type !== 'People'){
            return(
            <TouchableOpacity style={styles.add_touchable_floatingactionbutton}
                onPress={() => this._addItem()}>
                <Image style={styles.add_image} source={require('../assets/icons/ic_add.png')}/>
            </TouchableOpacity>
            )
        }
    }

    _checkData(){
        this._displayDataList()
    }

    _displayDetailsForMyItem = (idItem, type) => {
        this.props.navigation.navigate('ItemDetails', { idMyItem: idItem, type: type })
    }

    _deleteItem = (idItem, type) => {
        this.state.mydataObject.delete(idItem)
        this.setState({
            dataList: this.state.moneyList.filter(item => item.key != idItem)
        })

        alert(type + ' deleted')        
    }

    _closeRow = (rowMap, rowKey) => {
        if (rowMap[rowKey]) {
            rowMap[rowKey]._closeRow();
        }
    }

    _deleteRow = (rowMap, rowKey) => {
        closeRow(rowMap, rowKey);
        this._deleteItem()
    }

    _onRowDidOpen = rowKey => {
        console.log('This row opened', rowKey);
    }

    _renderHiddenItem = (data, rowMap) => {
        return (
            <View style={styles.rowBack}>
                <Text style={styles.toto}>Left</Text>
                <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnLeft]}
                    //onPress={() => this._closeRow(rowMap, data.item.index)} 
                    >
                    <Text style={styles.backTextWhite}>Close</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={[styles.backRightBtn, styles.backRightBtnRight]}
                    //onPress={() => this._deleteRow(rowMap, data.item.index)} 
                    >
                    <Text style={styles.backTextWhite}>Delete</Text>
                </TouchableOpacity>
            </View>
        )
    }

    render(){
        const type = 'Money'

        if(this.state.isLoading){
            return(
              <View style={styles.activity}>
                <ActivityIndicator size="large" color="#FB5B5A"/>
              </View>
            )
        } else {
            return(
                <View style={styles.main_container}>
                    <View style={styles.title_container}>
                        <Image source={require('../assets/icons/cadre.png')} style={styles.cadre} />
                        <Text style={styles.header_text}>
                            {(type === 'Money') ? this.state.total + ' €' : this.state.total}
                        </Text>
                    </View>
                    <View style={styles.main_container}>
                        <SwipeListView
                            data={this.state.dataList}
                            renderItem={({item}) => <MyItem 
                                myItem={item}
                                itemType={type}
                                displayDetailsForMyItem={this._displayDetailsForMyItem}
                                deleteItem={this._deleteItem}/>}
                            renderHiddenItem={this._renderHiddenItem}
                            leftOpenValue={75}
                            rightOpenValue={-150}
                            previewRowKey={'0'}
                            previewOpenValue={-40}
                            previewOpenDelay={3000}
                            onRowDidOpen={this._onRowDidOpen}
                        />
                    </View>
                </View>
            )
        }
    }
}

const styles=StyleSheet.create({
    toto: {
        color: 'white'
    },
    main_container: {
        flex: 1,
        backgroundColor: '#003F5C'
    },
    title_container: {
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 40,
        marginBottom: 40
    },
    header_text: {
        textAlign: 'center',
        fontSize: 35,
        color: 'white',
    },
    cadre: {
        position: 'absolute',
        marginRight: 10,
    },
    add_touchable_headerrightbutton: {
        marginRight: 8
    },
    add_image: {
        marginRight: 10,
        fontSize: 30,
        color: 'white'
    },
    add_touchable_floatingactionbutton: {
        position: 'absolute',
        width: 60,
        height: 60,
        right: 30,
        bottom: 30,
        borderRadius: 30,
        backgroundColor: '#e91e63',
        justifyContent: 'center',
        alignItems: 'center'
    },
    activity: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#003F5C'
    },
    container: {
        backgroundColor: 'white',
        flex: 1,
    },
    backTextWhite: {
        color: '#FFF',
    },
    rowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        borderBottomColor: 'black',
        borderBottomWidth: 1,
        justifyContent: 'center',
        height: 50,
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: '#DDD',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
    },
    backRightBtn: {
        alignItems: 'center',
        bottom: 0,
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        width: 75,
    },
    backRightBtnLeft: {
        alignSelf: 'flex-end',
        backgroundColor: 'blue',
        right: 75,
    },
    backRightBtnRight: {
        backgroundColor: 'red',
        right: 0,
    },
    trash: {
        height: 25,
        width: 25,
    },
})

export default Test

Объект MyItem правильно отображается.

1 Ответ

0 голосов
/ 17 марта 2020

Ладно, наверное, я нашел причину этой проблемы (и если кто-то может объяснить разницу, я ее принимаю).

Функция hiddenRender не будет отображать правильную кнопку, потому что они меньше TouchableOpacity.

И проблема в том, что я импортировал TouchableOpacity из react-native-gesture-handler.

Но когда я импортирую TouchableOpacity из react-native, он работает нормально.

Попробуйте закуску, которую я обновил.

...