当包含WebView时，React Native-React Navigation底部选项卡的缓慢过渡滞后 应用程序从后台进入时在切换选项卡时滞后依赖项 App.tsx

问题描述

应用程序从后台进入时在切换选项卡时滞后

我之前有4个标签集中（呈现）。因此，当应用程序从后台运行时，我更改了标签页，但是切换这些标签页需要0.3-1s。

仅在第一次重新调整每个标签的位置时才出现滞后。

依赖项

• “ @ react-navigation / bottom-tabs”：“ ^ 5.8.0”，
• “ @ react-navigation / native”：“ ^ 5.7.3”，
• “反应”：“ 16.13.1”，
• “ react-native”：“ 0.63.2”，
• “反应本地安全区域上下文”：“ ^ 3.1.7”，
• “ react-native-screens”：“ ^ 2.10.1”，
• “ react-native-webview”：“ ^ 10.8.3”

App.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',});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）