如何通过在react native的平面列表中按下view来增加和减少特定视图的高度？

qgelzfjb 于 2023-01-21 发布在 React

关注(0)|答案(2)|浏览(122)

我已经渲染了10个视图通过使用平面列表第一我想显示的细节，通过增加高度当用户点击视图号6和降低高度当用户再次点击它我已经做到了，但问题是，当我点击视图号6所有视图的高度增加，并再次渲染列表从第一视图，而不是从第六如何增加和降低特定视图的高度和从增加的相同视图渲染

const setFunctionality = () => {

        setcount(count + 1)

        if (count % 2 == 0) {
            setinitialHeight(windowWidth > windowHeight ? verticalScale(140) : verticalScale(150))
            setIsViewShown(false)

        }

        else {
            setinitialHeight(windowWidth > windowHeight ? verticalScale(170) : verticalScale(280))
            setIsViewShown(true)
        }

    }

 <View>
            <FlatList
                data={data}
                // keyExtractor={(item) => item.key}
                style={{ backgroundColor: '#fff', }}
                contentContainerStyle={{ paddingBottom: '5%' }}
                renderItem={(element) => {
                    
                    return (

                        <View style={{ flexDirection: 'column', flex: 1, width: '100%' }}>

                            <TouchableOpacity onPress={() => setFunctionality()}>
                                <View style={{ paddingLeft: 5, flexDirection: 'row', flex: 1, height: initialHeight, backgroundColor: element.item.Status == 'Open' ? '#B7E6E6' : '#EFA5A5', marginTop: 10, borderRadius: 5, alignContent: 'center', marginHorizontal: 10, }}>


                                    <View style={{ backgroundColor: '#fff', width: 50, height: 50, borderRadius: 27, alignSelf: 'center', justifyContent: 'center', alignItems: 'center' }}>

                                        <Text style={{ color: element.item.Status == 'Open' ? '#B7E6E6' : '#EFA5A5' }}>{element.item.Status}</Text>
                                    </View>

                                    <View style={{ flex: 1, borderTopRightRadius: 20, borderBottomRightRadius: 20, padding: windowWidth > windowHeight ? moderateScale(10) : moderateScale(15), justifyContent: 'center' }}>

                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5), marginTop: 10 }}>

                                            <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(14) : moderateScale(12), fontFamily: 'DMSans-Bold' }}>Customer ID: {element.item.CusId}</Text>
                                            <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(14) : moderateScale(12), fontFamily: 'DMSans-Bold' }}>Customer PO: {element.item.CusPo}</Text>
                                        </View>

                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>

                                            <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Date From: {element.item.Datefrm}</Text>
                                            <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Date To: {element.item.Dateto}</Text>
                                        </View>

                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>

                                            <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Tracking No: {element.item.TrNo}</Text>
                                            <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular' }}>Mark For: {element.item.Markfr}</Text>
                                        </View>

                                        {isViewShown == true ?
                                            <View >

                                                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>

                                                    <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Item ID: {element.item.ItmId}</Text>
                                                    <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Warehouse: {element.item.Wearh}</Text>
                                                </View>

                                                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>

                                                    <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Unit Price: {element.item.UPri}</Text>
                                                    <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular' }}>Ext Price: {element.item.EPri}</Text>
                                                </View>

                                                <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>

                                                    <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Order No: {element.item.OrdNum}</Text>
                                                    <Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular' }}>Status: {element.item.Status}</Text>
                                                </View>
                                            </View>

                                            :
                                            null
                                        }

                                    </View>

                                </View>
                            </TouchableOpacity>

                        </View>

                    )

                }}
               
            />
        </View>

react-native

来源：https://stackoverflow.com/questions/75143103/how-to-decrease-and-increase-the-height-of-a-specific-view-by-onpress-on-view-in

2条答案

按热度按时间

rhfm7lfc1#

您需要获取一个状态变量，该变量存储当前选定项的id，对于isViewShown==true?，您也需要这样做
为此，在您的data中应该有一个唯一的id。
所以在<TouchableOpacity onPress={() => setFunctionality(element.item)}>上

const [selectedId,setSelectedId] = useState(null);

在功能上

const setFunctionality = (item) => {

        setSelectedId(item.key)
        setcount(count + 1)

        if (count % 2 == 0) {
            setinitialHeight(windowWidth > windowHeight ? verticalScale(140) : verticalScale(150))
            setIsViewShown(false)

        }

        else {
            setinitialHeight(windowWidth > windowHeight ? verticalScale(170) : verticalScale(280))
            setIsViewShown(true)
        }

    }

对于您给出的问题，您需要添加一个同样基于selectedId的高度条件：

height:selectedId==element.item.id? initialHeight:20,

在这里，您可以使用任何初始高度或正常高度，而不是20

赞(0）回复(0）举报 2023-01-21

zysjyyx42#

您可以使用索引来识别卡片。

const [selectedCardIndex,setSelectedCardIndex] = useState(null);

return(<View>
<FlatList
 data={data}
 style={{ backgroundColor: '#fff', }}
 contentContainerStyle={{ paddingBottom: '5%' }}
 renderItem={{item,index} => {
                
 return (<TouchableOpacity 
  style={{height:index==selectedCardIndex?100:50}} 
  onPress={() => selectedCardIndex(index)}>
    ...your code...
 </TouchableOpacity>)
 })
/>

注意：但是在平面列表中，每张卡片应该包含相同的高度和宽度。你可以使用 scrollView 来代替。

赞(0）回复(0）举报 2023-01-21

我来回答

如何通过在react native的平面列表中按下view来增加和减少特定视图的高度？

2条答案

相关问题

热门标签

最新问答