React Native嵌套Tab与Stack导航导致页面重渲染后回到初始项

我正在开发React Native项目，ListArray页面包含可点击并保存到Context状态数组的全屏列表项。点击项时逻辑正常（可正确保存/删除），但页面会重渲染并回到第一项。替换Snap Carousel为FlatList问题依旧，移除Stack导航则可保持当前项。现需解决：阻止页面重渲染，或重渲染时保留当前项。

• Context更新触发全局重渲染：每次调用setArray时，所有订阅AppContext的组件都会重渲染，包括App组件中的导航结构，导致Stack导航器重新初始化，丢失滚动位置。
• 冗余的Context订阅：App组件不必要地订阅了AppContext并执行初始化逻辑，触发自身重渲染，进而导致整个导航树重新渲染。
• 滚动状态未持久化：Carousel/FlatList的滚动位置未被保存，重渲染后默认回到初始位置。

1. 优化Context订阅，避免不必要重渲染 #

将初始化逻辑移到AppProvider内部，移除App组件对AppContext的订阅，避免导航结构因Context更新重渲染。

修改Context.js #

import React, { useState, createContext, useEffect } from 'react'

const AppContext = createContext()

const AppProvider = ({ children }) => {
    const [array, setArray] = useState([]);

    // 初始化逻辑移到Provider内部
    useEffect(() => {
        setArray([])
    }, []);
  
    return (
        <AppContext.Provider value={{array, setArray}}>
            {children}
        </AppContext.Provider>
    )
}

export {AppContext, AppProvider}

修改App.js #

import { AppProvider } from './Context.js';
import ListArray from './ListArray.js'
import Settings from './Settings.js';
import { NavigationContainer } from '@react-navigation/native';            
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './Home.js';

const App = () => {
  const Stack = createNativeStackNavigator();

  function HomeScreenStack(){
    return(
      <Stack.Navigator>
         <Stack.Screen name="HomeScreen" component={Home} />
      </Stack.Navigator>
    )}

    function ListArrayScreenStack(){
      return(
        <Stack.Navigator>
           <Stack.Screen name="ListArrayScreen" component={ListArray} />
        </Stack.Navigator>
     )}

  const Tab = createBottomTabNavigator();
    
  return(
    <NavigationContainer>
        <Tab.Navigator>
              <Tab.Screen name="HomeScreenStack" component={HomeScreenStack} />
              <Tab.Screen name="ListArrayScreenStack"  component={ListArrayScreenStack} />
              <Tab.Screen name="SettingsScreen" component={Settings} />
        </Tab.Navigator> 
     </NavigationContainer>
        )
  }

export default function AppWrapper() {
  return (
    <AppProvider>
      <App />
    </AppProvider>
  );
}

2. 持久化滚动位置 #

若优化Context后仍存在重渲染问题，手动保存并恢复滚动位置：

针对Snap Carousel #

import { View, Dimensions } from "react-native";
import ListArrayItem from './ListArrayItem'
import Carousel from "react-native-snap-carousel";
import { useRef, useState, useEffect } from 'react';

const ListArray = () => {
    const data = [{id:'1', name:'Array item 1'}, {id:'2', name:'Array item 2'}, {id:'3', name:'Array item 3'}, {id:'4', name:'Array item 4'},{id:'5', name:'Array item 5'}]
    const deviceHeight = Dimensions.get('window').height;
    const deviceWidth = Dimensions.get('window').width;
    const carouselRef = useRef(null);
    const [currentIndex, setCurrentIndex] = useState(0);

    const CarouselCardItem = ( { item, index } ) => {
        return (
            <ListArrayItem id={item.id} name={item.name} deviceHeight={deviceHeight} deviceWidth={deviceWidth}/>
        ) 
      }

    // 保存当前滚动索引
    const handleSnapToItem = (index) => {
        setCurrentIndex(index);
    }

    // 组件挂载后恢复滚动位置
    useEffect(() => {
        if (carouselRef.current) {
            carouselRef.current.snapToItem(currentIndex);
        }
    }, []);
     
    return(
        <View>
            <Carousel
                ref={carouselRef}
                layout="default"
                data={data}
                renderItem={CarouselCardItem}
                sliderHeight={deviceHeight}
                itemHeight={deviceHeight}
                inactiveSlideShift={0}
                decelerationRate={0.2}
                lockScrollWhileSnapping={true}
                vertical
                onSnapToItem={handleSnapToItem}
                initialScrollIndex={currentIndex}
            />
        </View>
    );
}

export default ListArray;

针对FlatList #

import { FlatList, View, Dimensions } from "react-native";
import ListArrayItem from './ListArrayItem'
import { useRef, useState, useEffect } from 'react';

const ListArray = () => {
    const data = [{id:'1', name:'Array item 1'}, {id:'2', name:'Array item 2'}, {id:'3', name:'Array item 3'}, {id:'4', name:'Array item 4'},{id:'5', name:'Array item 5'}]
    const deviceHeight = Dimensions.get('window').height;
    const deviceWidth = Dimensions.get('window').width;
    const flatListRef = useRef(null);
    const [scrollOffset, setScrollOffset] = useState(0);

    const renderItem = ( { item, index } ) => {
        return (
            <ListArrayItem id={item.id} name={item.name} deviceHeight={deviceHeight} deviceWidth={deviceWidth}/>
        ) 
      }

    // 保存滚动偏移量
    const handleScroll = (event) => {
        setScrollOffset(event.nativeEvent.contentOffset.y);
    }

    // 组件挂载后恢复滚动位置
    useEffect(() => {
        if (flatListRef.current) {
            flatListRef.current.scrollToOffset({ offset: scrollOffset, animated: false });
        }
    }, []);
     
    return(
        <View>
            <FlatList
                ref={flatListRef}
                data={data}
                renderItem={renderItem}
                keyExtractor={item => item.id}
                onScroll={handleScroll}
                scrollEventThrottle={16}
            />
        </View>
    );
}

export default ListArray;

3. 优化ListArrayItem的状态同步 #

原组件仅在挂载时同步Context状态，修改为监听array变化，确保状态实时更新：

import {View, Text, Pressable} from 'react-native';
import { useState,useContext, useEffect } from 'react';
import { AppContext } from './Context.js';

const ListArrayItem = ({id, name, deviceHeight, deviceWidth}) => {
    const {array, setArray} = useContext(AppContext);
    const [isSaved, setIsSaved] = useState(false);

    // 监听array变化，同步isSaved状态
    useEffect(()=>{
        const itemExists = array.some(item => item.id === id);
        setIsSaved(itemExists);
    },[array, id])

    const PressHandler = () => {
        if(isSaved){
            // 使用函数式更新避免闭包问题
            setArray(prevArray => prevArray.filter(arrayItem => arrayItem.id !== id))
        } else {
            setArray(prevArray => [...prevArray, {id: id, name: name}]);
        }
    }

    return(
        <View style={{height:deviceHeight, width:deviceWidth, flex:1, borderWidth:1, borderColor:'black'}}>
           <Pressable style={{width:deviceWidth, alignItems:'center', height:200, backgroundColor:'yellow'}} onPress={PressHandler}>
               <Text>{name}</Text>
           </Pressable>
           {isSaved && <Text>SAVED</Text>}
        </View>
    )
}

export default ListArrayItem;

内容的提问来源于stack exchange，提问作者Bubbino