react-native - 将本机使用效果滚动到选定的项目对象

Question

我正在使用Graphql我的应用程序。Graphql有 fetch policy network-only，它将从服务器获取数据。我需要用于我的应用程序。我有两个不同的堆栈屏幕。每当我更改屏幕时，两个屏幕都会获取数据，因此，两个组件都会重新渲染。

在我的第一个屏幕上，用户可以选择一个项目，当项目被选中时，它将以正确的方式进入下一个屏幕。在第二个屏幕中，当我按下 navigation 时goBack，它将返回到第一个屏幕并开始获取数据，但我将所选项目保存在 Graphql 缓存中。当它返回第一个屏幕缓存时，返回所选值并将其保存到本地状态。在这里我卡住了，我想滚动到将显示所选项目的屏幕。为此，我创建了 flatList ref 并习惯于scrollToItem将useEffect所选项目传递给item道具。似乎它不起作用。我不知道如何解决这个问题。我的目标是当用户返回第一个屏幕时，它将滚动到选定的项目点。

这只是我的示例代码和获取。PS: IN HERE APP FETCH DATA ONCE, SO First screen DOES NOT RERENDER, FIRST SCREEN STAY AS IT WAS. 我想看看如何滚动到所选项目的示例

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { useNavigation } from "@react-navigation/native";

import {
  FlatList,
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  Button,
  View,
  Image,
} from "react-native";

const Item = ({ item, onPress, backgroundColor, textColor }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
    <Text style={[styles.title, textColor]}>{item.title}</Text>
  </TouchableOpacity>
);

function HomeScreen({ navigation }) {
  const [selectedId, setSelectedId] = React.useState(null);
  const flatList = React.useRef(null); // This is faltlist Ref
  const previousSelecteditem = selectedItemFromCache(); // this cache return selected item
  const [state, setState] = React.useState([]);

  React.useEffect(() => {
    fetchData();
    flatList?.current?.scrollToItem({
      item: previousSelecteditem, // this does not do anything
    });
  }, []);

  const fetchData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();

    setState(data);
  };

  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
    const color = item.id === selectedId ? "white" : "black";

    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        backgroundColor={{ backgroundColor }}
        textColor={{ color }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        ref={flatList} // ref
        data={state}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedId}
      />
    </SafeAreaView>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={({ navigation, route }) => ({
            headerRight: () => (
              <Button
                onPress={() => navigation.navigate("Details")}
                title="Info"
                color="#00cc00"
              />
            ),
          })}
        />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

标签： react-nativeuse-effectreact-native-flatlistscrolltoindex