如何“延迟加载”选项卡导航器屏幕现在已经从反应导航中删除了懒惰

Question

react-navigation的维护者已从库中删除了'lazy：true'，导致所有选项卡一次尝试渲染（以前由懒惰控制的提取现在无序触发）。

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

Answer 1

似乎他们确实删除了它，但已决定将其添加回v 1.1.2

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

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

Answer 2

你可以使用LazyLoading的react-navigation-utils

Answer 3

这个怎么样？

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 4

React-navigation现在支持qazxsw poi qazxsw poi。您可以使用它来包装您想要的屏幕，以防止在未聚焦时进行更新。

withNavigationFocus

附：如果你使用Redux只需要做wrapper

Answer 5

在新版本的React Navigation中，

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);

prop默认设置为export default connect(mapStateToProps, mapDispatchToProps)(withNavigationFocus(LazyScreen));。

见lazy