react-native - 如何使用 createStackNavigator 防止在 React Navigation 版本 5.x 中重新渲染我的组件？

Question

在我的 React Native 应用程序中，我使用 StackNavigator，或多或少如下：

// React navigation
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Create stack navigator
const Stack = createStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator detachInactiveScreens={false} screenOptions={{ header: () => null }}>
                <Stack.Screen name="master" component={MasterView} />
                <Stack.Screen name="detail" component={DetailView} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

当用户使用应用程序时，他/她在 MasterView 和 DetailView 之间来回切换。每当用户导航到 DetailView 时，它都会重新实例化。但是，我需要防止在导航时重新实例化 DetailView。我希望使用属性 detachInactiveScreens 来完成这里描述的这种行为： https ://reactnavigation.org/docs/stack-navigator/#detachinactivescreens

我还在 App.tsx 中包含了 enableScreens 的调用，如下所示

// Import react-native-screens
import { enableScreens } from 'react-native-screens';
enableScreens();

但是，只要用户导航到它，我仍然会看到我的 DetailView 被重新实例化。我是否遵循错误的方法？有没有另一种方法来完成这种行为？

提前致谢

标签： react-nativereact-navigationreact-navigation-v5