如何保持 react-native-webview 的多个实例打开（并安装），同时能够在它们之间导航（使用 react-navigation）

Question

I have react-navigation set up in a react-native app like so.

 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>

In the AppScreen I am displaying webpages from external sources using react-native-webview like so.

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>
  );
};

The HomeScreen just shows a list of apps the user can view in the AppScreen. Whenever the user navigates between these two screens however, the webview in the AppScreen gets unmounted which means the state of the application and any granted permissions to it are lost, is there a way to stop this from happening?

Additionally, is there a way to use React Navigation (or any other form of navigation) to be able to have multiple instances of the AppScreen open at once, without them being unmounted? The functionality I'd like is similar to that of tabs in a browser, but since I'm rather new with React Native I'm unsure of what would be the right way to implement this.

Answer 1

Consider using react-native-navigation . The BottomTabs fit this use case perfectly.

Wix's library lets react-native open instances of itself on separate threads. This makes packages like Webview not interfere with each other across the instances.