Question

我的 RN 申请中有一个特殊案例。

我有一个 Webview 可以在特定屏幕上加载第三方小部件。

流程类似于：

主屏幕包含项目列表
每个项目都可以点击并打开一个项目详细信息屏幕
在此 ItemDetails 屏幕中，我使用 Webview 小部件，该小部件将显示的 Item 中的值用作参数

问题是每次我导航到 ItemDetails 屏幕时，都需要初始化 Webview，下载并执行 HTML/JS/CSS 内容。返回主屏幕时，Webview 被卸载并销毁当打开一个不同的项目时，所有的 Webview 初始化都会重新开始。

诀窍是我只需更改 URL 即可加载新项目的信息，而无需完全重新加载 Web 视图。

是否有任何选项可以让 WebView 保持打开状态，以便在两次导航之间避免所有安装延迟，并且可以更快地显示信息。

技术细节：

该应用正在使用博览会托管流程
我们使用 react-navigation 在屏幕之间导航

以下代码只是作为当前项目的一个例子的简化。

堆栈声明是：

    import { createStackNavigator } from '@react-navigation/stack';
    
    const Stack = createStackNavigator();
    
    function MyStack() {
      return (
        <Stack.Navigator>
          <Stack.Screen name="ItemsList" component={ItemList} />
          <Stack.Screen name="ItemDetails" component={ItemDetails} />
        </Stack.Navigator>
      );
    }

物品清单：

    import React from 'react';
    import { SafeAreaView, TouchableOpacity, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
    
    const DATA = [
      {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item',
      },
      {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item',
      },
      {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item',
      },
    ];
    
    const Item = ({ title, id }) => (
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ItemDetails', { id })}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
    
    const App = () => {
      const renderItem = ({ item }) => (
        <Item title={item.title} />
      );
    
      return (
        <SafeAreaView style={styles.container}>
          <FlatList
            data={DATA}
            renderItem={renderItem}
            keyExtractor={item => item.id}
          />
        </SafeAreaView>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
      },
      item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
      },
      title: {
        fontSize: 32,
      },
    });
    
    export default App;

商品详情：

    import React, { Component } from 'react';

    import { WebView } from 'react-native-webview';
    
    const ItemDetails = ({ route }) => (
      <WebView
        source={{ uri: `https://thirdpartywidget.com/${route.params.id}` }}
            style={{ marginTop: 20 }}
      />
    )

ReactNative - 在屏幕之间共享 Webview 会话

0 个答案: