Question

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

当用户单击某项中的按钮时，您想要显示的视图与您拥有的平面列表项看起来不同。

假设您按照以下方式实现

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

用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

Answer 1

问题尚不清楚，但是即使您有条件地渲染组件，页面的滚动位置也始终保持不变。如果要确保在显示“详细信息”视图时始终滚动到页面顶部，则可以始终执行window.scrollTo（0，0在showDetail标志为true之前。

请提供更多详细信息以更好地理解或共享密码笔

Answer 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

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

2 个答案: