时间戳

首页 > 解决方案 > 反应，渲染不同的组件并保持滚动位置

reactjs - 反应，渲染不同的组件并保持滚动位置

问题描述

假设您有一个水平平面列表。

当用户单击项目中的按钮时，您希望呈现一个看起来与您拥有的平面列表项目不同的视图。

假设你像下面这样实现它

     {showDetail ? (
       <DetailView onPress={toggleShowDetail} />
     ) : (
       <FlatList
         data={data}
         renderItem={() => (
           <View>
             <Button onPress={toggleShowDetail} />{' '}
           </View>
         )}
       />
     )}

当 flatlist 被替换和替换回来时，flatlist 的滚动位置是否保持不变DetailView？

如果没有，我可以采取哪些方法？

如果可能的话，我想避免使用模态

我不确定设置样式width=0是否会在设置时保持滚动位置width=prevSavedWidth..但肯定可以尝试..

import _ from 'lodash'

import React, {useState} from 'react'
import {useDispatch} from 'react-redux'
import {useSelector} from 'react-redux'
import {
  Text,
  Image,
  View,
  NativeModules,
  NativeEventEmitter,
  TouchableOpacity,
  FlatList,
} from 'react-native'

const Qnas = props => {
  const flatlistRef = React.useRef(null)
  const [single, setSingle] = React.useState(false)
  let qnas = [
    {
      title: 'a',
      id: 1,
    },
    {
      title: 'b',
      id: 2,
    },
    {
      title: 'c',
      id: 3,
    },
    {
      title: 'd',
      id: 4,
    },
    {
      title: 'e',
    },
    {
      title: 'f',
    },
    {
      title: 'j',
    },
  ]

  const toggle = () => {
    setSingle(!single)
  }

  const renderItem = ({item: qna, index}) => {
    return (
      <View style={{height: 80, width: 200}}>
        <Text>{qna.title}</Text>
        <TouchableOpacity onPress={toggle}>
          <Text>toggle</Text>
        </TouchableOpacity>
      </View>
    )
  }

  const keyExtractor = (item, index) => {
    return `qna-${item.title}-${index}`
  }

  return (
    <View style={{height: 200}}>
      {single ? (
        <View>
          <Text>hello</Text>
          <TouchableOpacity onPress={toggle}>
            <Text>toggle</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <FlatList
          horizontal
          ref={flatlistRef}
          data={qnas}
          renderItem={renderItem}
          keyExtractor={keyExtractor}
          contentContainerStyle={{
            flexDirection: 'column',
            flexWrap: 'wrap',
          }}
        />
      )}
    </View>
  )
}

export default Qnas

标签： reactjsreact-native

解决方案

您可以有一个 handleScroll 方法，该方法在 FlatList Scroll 上被调用并将 srollPosition 保存在状态


const handleScroll = event => {
    console.log(event);
    setScrollPosition(event.nativeEvent.contentOffset.x);
  };

<FlatList onScroll={handleScroll} />```

and then in your toggle method have a check on if single is true set the scrollPosition of the FlatList using ref

   const toggle = () => {
    if(single){
this.flatlistRef.scrollToOffset({ animated: true, offset: scrollPosition }

setSingle(!single);
}

hope this helps

推荐阅读