Question

我有一个带有4个标签的简单React Native应用程序（为简洁起见，将其简化）：

<Tab.Navigator>
  <Tab.Screen name="Feed" component={WebViewNavigator} initialParams={{...}} />
  <Tab.Screen name="Schedule" component={WebViewNavigator} initialParams={{...}} />
  <Tab.Screen name="About" component={WebViewNavigator} initialParams={{...}} />
  <Tab.Screen name="Help" component={WebViewNavigator} initialParams={{...}} />
</Tab.Navigator>

WebViewNavigator组件是使用React Native Webview加载某些相应Web内容的堆栈视图，但是，只有在激活相应的选项卡后，它才会加载：

<Stack.Navigator>
  <Stack.Screen name="Viewer" component={WebViewScreen} />
</Stack.Navigator>

是否有一种方法可以让该应用在加载时加载所有标签/网络视图，这样每个标签上的Web视图加载时间都不会延迟？

我正在使用createBottomTabNavigator的lazy道具，似乎没有任何作用：

<Tab.Navigator lazy={false}> ...

在WebView构造函数中触发日志显示堆栈导航器已实例化，但未加载Web视图。

Answer 1

该问题似乎仅在IOS中出现，Android运行正常。

有人在#include <stdlib.h> typedef struct Integer_Pair { int a; int b; } pair; // N.B. assign the size of the return array to the pointer *z size_t twos_difference(size_t n, const int array[n], size_t *z) { pair* tot = malloc(sizeof(pair)); if (tot == NULL) return 0; int temp[n]; int val; // Counter for tot int c = 0; // Copy array elements in temp for later comparison for (size_t i = 0; i < n; i++) { temp[i] = array[i]; } // Sort array and store in ascending order into temp for (size_t i = 0; i < n; i++) { for (size_t j = i + 1; j < n; j++) { if (temp[i] > temp[j]) { val = temp[i]; temp[i] = temp[j]; temp[j] = val; } } } // If difference between 2 numbers is 2, store in tot for (size_t i = 0; i < n; i++) { for (size_t j = 0; j < n; j++) { if (temp[i] - array[j] == -2) { tot[c].a = array[i]; tot[c].b = temp[j]; c++; } } } // Copy number of pairs with difference of 2 in tot *z = c; return *z; free(tot); }包中提出了PR，以解决以下特定问题：https://github.com/react-native-community/react-native-webview/pull/813

要在合并之前使用它，请在package.json中使用：

react-native-webview

运行"react-native-webview": "https://github.com/philippeauriach/react-native-webview#8b7015037d9c1329e4e65e1978e98c4897a928e6",

Answer 2

使用<Tab.Navigator lazy={false}>，您还需要从修补的PR中安装Webview

"react-native-webview": "git://github.com/NeilChan/react-native-webview#ab9df38fec002aa7f459498d3d53adb47b3f1f9c",

然后运行yarn / npm install和cd ios && pod install

在react-navigation 5.x选项卡中预加载嵌套堆栈

2 个答案: