react-native - React Native - React Navigation Bottom Tab 包含 WebView 时的缓慢转换（滞后）

Question

当应用程序来自后台时切换选项卡时滞后

我之前有 4 个标签集中（渲染）。因此，当应用程序来自后台时，我更改了选项卡，但切换这些选项卡需要 0,3 - 1 秒。

滞后只是在第一次重新关注每个标签。

依赖项

• "@react-navigation/bottom-tabs": "^5.8.0",
• "@react-navigation/native": "^5.7.3",
• “反应”：“16.13.1”，
• “反应原生”：“0.63.2”，
• "react-native-safe-area-context": "^3.1.7",
• “反应原生屏幕”：“^2.10.1”，
• “react-native-webview”：“^10.8.3”

应用程序.tsx

import React, {useEffect} from 'react';
import {StyleSheet} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer, useIsFocused} from '@react-navigation/native';
import WebView from 'react-native-webview';

function Tab1() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return <WebView source={{uri: 'https://google.com'}} style={styles.tab1} />;
}

function Tab2() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return <WebView source={{uri: 'https://facebook.com'}} style={styles.tab1} />;
}

function Tab3() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return (
    <WebView source={{uri: 'https://instagram.com'}} style={styles.tab1} />
  );
}

function Tab4() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return <WebView source={{uri: 'https://tiktok.com'}} style={styles.tab1} />;
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator lazy={false}>
        <Tab.Screen name={'Tab1'} component={Tab1} />
        <Tab.Screen name={'Tab2'} component={Tab2} />
        <Tab.Screen name={'Tab3'} component={Tab3} />
        <Tab.Screen name={'Tab4'} component={Tab4} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  tab1: {
    flex: 1,
    backgroundColor: 'red',
  },
  tab2: {
    flex: 1,
    backgroundColor: 'blue',
  },
  tab3: {
    flex: 1,
    backgroundColor: 'green',
  },
  tab4: {
    flex: 1,
    backgroundColor: 'black',
  },
});

标签： react-nativereact-navigationreact-navigation-bottom-tab