我已经用平面列表呈现了10个视图1我想通过当用户点击第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>

推荐答案

您需要使用一个状态变量来存储当前选定项的id,对于isViewShown==true?,您还需要使用isViewShown==true&&selectedId==element.item.key?

为此,在您的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)
        }

    }

对于您给出的问题,您需要添加一个高度条件,该条件也基于选定的ID:

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

这里不是20,而是你想要的任何初始高度或正常高度

Reactjs相关问答推荐

如何将google地址lat收件箱设置为输入值?

如何实现黑暗模式 map ?

在Next.js中实现动态更改的服务器组件

无法从正在使用Reaction的Electron 商务store 项目中的购物车中删除项目

如何在整个应用程序中显示通用弹出窗口中的点击事件

在React中映射对象数组时,如何正确呈现JSX.Element或React.ReactNode类型?

React路由dom布局隐藏内容

React-apexcharts 中的 Y 轴刻度不会动态更新符号

通过createRoot创建的React元素无法调用Provider值

我可以同时使用 Gatsby 和 NEXT.JS 吗?

REACT: UseState 没有更新变量(ant design 模态形式)

无法访问 usefocusEffect 中 const 的更新状态

使用 toast 时挂钩调用无效

如何在不重新加载页面的情况下加载新添加的数据?

如何在react 中更新子组件中的变量?

如何检索包含动态段的未解析路径?

无法重用我的组件,它只显示 1 次

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上

如何在 React 中制作动画?

我可以在类组件中使用 useState 挂钩吗?