既然 lazy 已从 react-navigation 中移除，如何 "lazy load" 选项卡导航器屏幕

Question

react-navigation 的维护者已从库中删除 'lazy: true'，导致所有选项卡尝试一次呈现（并且以前由延迟控制的获取现在乱序触发）。

为了保持类似的功能，您如何在标签页屏幕上强制等待以在第一次聚焦之前不加载或调用提取调用？

Answer 1

这个怎么样？

const MyTab = TabNavigator({
    tab1:{screen:TabScreen1},
    tab2:{screen:TabScreen2}
}


class MainScreen extends React.Component{

    constructor(){
        super();
        this.state = {
            loading:true
        }
    }

    componentWillMount(){
        //fetch login
        //set loading:false when fetch is done
    }

    render(){
        !this.state.loading && <MyTab/>
    }
}

Answer 2

您可以使用 react-navigation-utils

中的 LazyLoading

Answer 3

他们似乎确实删除了它，但决定在 v 1.1.2 中重新添加它

https://github.com/react-navigation/react-navigation/releases/tag/v1.1.2

因此，您应该能够在 TabNavigatorConfig 对象中传递 lazy={true}，然后选项卡在它们处于活动状态之前不会呈现。为了进一步优化内存使用，您可以将其与 removeClippedSubviews 结合使用以从非活动选项卡中释放内存。

Answer 4

React-navigation 现在支持 withNavigationFocus wrapper。您可以使用它来包裹您想要防止在未聚焦时更新的屏幕。

import React from 'react';
import { Text } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class LazyScreen extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     return nextProps.isFocused;
   }

  render() {
    return <Text>{this.props.isFocused ? 'Focused' : 'Not focused' </Text>;
  }
}

export default withNavigationFocus(LazyScreen);

P.S。如果你使用 Redux 就这样做 export default connect(mapStateToProps, mapDispatchToProps)(withNavigationFocus(LazyScreen));

Answer 5

在 React Navigation 的新版本中，lazy 属性默认设置为 true。

见https://reactnavigation.org/docs/en/bottom-tab-navigator.html#lazy

Answer 6

lazy={true}
  optimizationsEnabled={true}
  tabBarOptions={tabBarOptions}

以上代码很重要，试试看

import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { createStackNavigator } from "@react-navigation/stack";

const TabNavigator = createMaterialTopTabNavigator();
const Stack1 = createStackNavigator();
const Stack2 = createStackNavigator();

const ProductsScreen = (props) => {
//
return (
<TabNavigator.Navigator
  lazy={true}
  optimizationsEnabled={true}
  tabBarOptions={tabBarOptions}
>
  <TabNavigator.Screen name="HOME" component={StackScreen1} />
  <TabNavigator.Screen name="SHOP" component={StackScreen2} />
</TabNavigator.Navigator>
);
};

const tabBarOptions = {
indicatorStyle: {
height: null,
top: 0,
backgroundColor: "#ccc",
borderBottomColor: "black",
borderBottomWidth: 3,
},
activeTintColor: "black",

style: {
backgroundColor: "red",
},
labelStyle: { fontSize: 13 },
};

既然 lazy 已从 react-navigation 中移除，如何 "lazy load" 选项卡导航器屏幕

How to "lazy load" tab navigator screens now that lazy has been removed from react-navigation

react-native

react-navigation