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

【问题标题】：React, render different components and maintain scroll position反应，渲染不同的组件并保持滚动位置
【发布时间】：2020-07-01 20:49:49
【问题描述】：

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

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

假设你像下面这样实现它

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

将flatlist替换为DetailView并替换回来时，flatlist的滚动位置是否保持？

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

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

编辑，

我不确定设置样式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

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

问题不清楚，但页面的滚动位置始终保持不变，即使您根据条件渲染组件。如果您想确保在显示 Detail 视图时始终滚动到页面顶部，则可以始终在 showDetail 标志为 true 之前执行 window.scrollTo(0, 0。

请提供更多细节以便更好地理解或分享代码笔

【讨论】：

我已经添加了我的测试代码，我还没有创建 codepen.. 当你从 flatlist => single => flatlist 切换时，你可以看到滚动位置丢失了

【解决方案2】：

你可以有一个 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

【讨论】：