打开反应本机屏幕时调用函数

Question

每次用户打开我的一个反应本机屏幕（我正在使用 StackNavigator）时，我都试图从 AsyncStorage 加载 JSON。 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>
        );
    }
}

从 'react' 导入 { useEffect, useState };

const Sample = () => {
    const [state, setState] = useState([]);
    useEffect(() => {
        setState(inputObject);
    }, [])

    return(
         <View>
         //you can render the data here
         </View>
    );

}

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

Answer 2

这可以使用 'withNavigationFocus' 轻松完成，可在 React Native 文档 here

中找到

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 3

如果你想处理后退按钮页面导航，那么你需要听组件挂载时的一次导航事件，使用下面的代码。

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

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

Answer 5

我在视图中使用了“onLayout”方法。

read the doc

onLayout: Invoked on mount and on layout changes.

export default function Login({ navigation }) {

  const executeOnLoad = () => {
    console.log("view has loaded!");
  };

  return (
    <View style={styles.container} onLayout={executeOnLoad}>
    --- layout code here
    </View>
  );
}

Answer 6

既然你在处理屏幕，我会建议你使用 useFocusEffect hooks。

示例：

const ExampleScreen = () => {
    // your code here
    useFocusEffect(useCallback(() => {
       // your logic goes here
    }, []))
    return (
        <View>
           {/* render your content here */}
        </View>
    )
}

打开反应本机屏幕时调用函数

Calling a function when opening a react-native screen

function

react-native

react-navigation