如何保持多个react-native-webview实例打开(和挂载)，同时能够在它们之间导航(使用react-navi

Question

我在一个react-native应用程序中设置了react-navigation

const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen}/>
<Stack.Screen name="ScanScreen" component={ScanScreen} options={{ title: 'Add a new app'}} />
<Stack.Screen name="AppScreen" component={AppScreen} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>

在AppScreen中，我使用react-native-webview像这样显示来自外部源的网页。

const AppScreen = ({ navigation, route }) => {
const [uri, setUri] = useState();
React.useEffect(() => {
if (route.params?.uri) {
setUri(route.params?.uri);
}
}, [route.params?.app]);
return (
<View>
<WebView
source={{ uri: uri }}
allowsInlineMediaPlayback={true}
scrollEnabled={false}
/>
</View>
);
};

主屏幕只是显示了用户可以在AppScreen中查看的应用程序列表。当用户在这两个屏幕之间导航时，AppScreen中的webview被卸载，这意味着应用程序的状态和任何授予的权限都丢失了，有办法阻止这种情况发生吗?

此外，是否有一种方法可以使用React导航(或任何其他形式的导航)，能够有多个实例的AppScreen打开一次，没有他们被卸载?我想要的功能类似于浏览器中的选项卡，但由于我是React Native的新手，我不确定什么是实现这一功能的正确方法。

Answer 1

编辑;(2023)反应导航使用它的底部标签库。一旦加载，它将把这些标签保存在内存中。切换选项卡不会卸载其他打开的WebViews。

你的webview必须是一个标签(你可能想要隐藏标签或自定义标签栏组件)。

当你想创建一个新的WebView时，你可以使用状态容器动态地生成它们。

选择:考虑使用react-native-navigation。底部标签非常适合这个用例。

Wix的库允许在单独的线程上响应本地的自身开放实例。这使得像Webview这样的包不会在实例之间相互干扰。