Question

每次用户打开我的反应原生屏幕时，我都会尝试从AsyncStorage加载JSON（我正在使用StackNavigator）。此JSON包含有关我的状态应设置为什么的信息。

如何调用每次打开此屏幕时运行的功能？

更多信息：我编写了一个函数，根据从AsyncStorage加载的JSON更新我的状态。从按钮调用时该功能完美无缺，但是当从render()调用该功能时，我的部分屏幕会冻结而某些按钮不再可触摸。奇怪的是，只有TextInput仍然有效。

Answer 1

使用componentWillMount()方法。这将在render()方法被触发之前自动执行。

class Sample extends Component{
    state = {data : []};
    componentWillMount(){
        this.setState({data : inputObject});
    }
    render(){
        return(
            <View>
            //you can render the data here
            </View>
        );
    }
}

参考：https://facebook.github.io/react/docs/react-component.html#componentwillmount

Answer 2

如果要处理后退按钮页面导航，则需要收听组件安装后，一旦发生导航事件，请使用下面的代码。

componentDidMount = () => {
    this.focusListener = this.props.navigation.addListener('focus',
       () => { 
               console.log('focus is called'); 
              //your logic here.
       }
     );
}

Answer 3

可以使用react本机文档here

中的'withNavigationFocus'轻松完成此操作

import React, { Component } from 'react';
import { View } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class TabScreen extends Component {
  componentDidUpdate(prevProps) {
    if (prevProps.isFocused !== this.props.isFocused) {
      // Use the `this.props.isFocused` boolean
      // Call any action
    }
  }

  render() {
    return <View />;
  }
}

// withNavigationFocus returns a component that wraps TabScreen and passes
// in the navigation prop
export default withNavigationFocus(TabScreen);

Answer 4

您可以使用 hook 方法：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

我实际上只是复制了文档的第一个示例，但这是一个非常好的示例。如果您想继续阅读：https://reactjs.org/docs/hooks-effect.html

打开react-native屏幕时调用函数

4 个答案: