Question

反应导航的维护者已经删除了“懒惰：真实＆＃39;来自库，导致所有选项卡一次尝试渲染（并且之前由懒惰控制的提取现在按顺序触发）。

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

Answer 1

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

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

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

Answer 2

您可以使用react-navigation-utils

中的LazyLoading

Answer 3

/* Reference to hold the update function */
let updateOutside

function App() {
  const [state, update] = useState()
  
  useEffect(() => {
    /* Assign update to outside variable */
    updateOutside = update

    /* Unassign when component unmounts */
    return () => updateOutside = null
  })

  return `App State: ${state}`
}

if (updateOutside) updateOutside(/* will re-render App */)

上面的代码很重要，请尝试

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

Answer 4

这个怎么样？

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 5

现在，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 6

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

请参见https://reactnavigation.org/docs/en/tab-navigator.html

如何＆＃34;懒惰负载＆＃34;选项卡导航器屏幕现在已经从反应导航中删除了懒惰

6 个答案: