Question

屏幕C：我有一个编辑功能屏幕，用户可以删除它。

屏幕A：在主页上，我有一个就绪函数，它是onRefresh函数，可以刷新页面。

用户从屏幕C删除功能，然后转到屏幕A

是否可以刷新特定功能？

示例。

SELECT m.start_measurement
       , m.stop_measurement
       , MAX(p.value_cal) FILTER(WHERE p.sensor_name = 'curved_mirror_steps') AS curved_mirror_steps
       , ...
       , MAX(pa.value_cal) FILTER(WHERE pa.sensor_name = 'na_s11_iq_data') AS na_s11_iq_data
      
FROM v_na_measurement_status m 
LEFT JOIN sensor_double_precision p 
  ON p.timestamp BETWEEN m.start_measurement 
                     AND m.stop_measurement
LEFT JOIN sensor_double_precision_arr pa
  ON pa.timestamp BETWEEN m.start_measurement 
                     AND m.stop_measurement
GROUP BY m.start_measurement
       , m.stop_measurement

我的主页代码如下

// call this function onload
function startOb(params) {
            const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
            // target container to watch     
            const list = document.querySelector(`#container`);
            // options
            const config = {
                attributes: true,
                childList: true,
                characterData: true,
                subtree: true,
            };
            // instance
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {

                    if (mutation.type === "attributes") {
                        console.log("mutation =", mutation);
                        console.log(`The \`${mutation.attributeName}\` attribute was modified.`);
                        // console.log("list style =", list.style);
                        
                    }
                });
            });
            observer.observe(list, config);
        }



          function generatePattern() {
            let key = document.getElementsByClassName("keyboard-letter");
            let number = document.getElementsByClassName("keyboard-number");

            console.log(key);

            for (let i = 0; i < key.length; i++) {
                let boolean = Math.random() >= 0.75;

                if (boolean == true) {
                    key[i].setAttribute(`style`, `backgroundColor: white; color: black`);
                    
                } else if (boolean == false) {
                    key[i].setAttribute(`style`, `backgroundColor: black; color: white`);
                };
            }
        }

Answer 1

如果我理解这种情况，当您从屏幕C返回时，您想在屏幕A中触发onRefresh。

不确定该功能，但是您可以将参数传递到主屏幕，该主屏幕将检查加载并刷新（如果已指定）。

  navigation.navigate('Home', {
     refreshOnLoad: true
  })

  ...

  function HomeScreen({ route, navigation }) {
     const { refreshOnLoad } = route.params;
     if (refreshOnLoad) {
        ...
     }

我将对App（Redux或MobX树）具有一个通用状态，在这种情况下会对其进行更新

Answer 2

从ScreenC导航到ScreenA后，刷新ScreenA的另一种方法是添加一个侦听器，以使事件集中在导航上，例如，在ScreenA的构造函数中具有这样的侦听器

construction(props){
    ...
    this.focusListener = props.navigation.addListener('focus', this.onRefresh);
    ...
}

不要忘记像这样在componentWillUnmount()上将其删除

componentWillUnmount = () => {
    this.focusListener();
}

希望这会有所帮助。您可以了解有关此here的更多信息。

React Navigation 2x示例

在react-navigation 2x中，您必须侦听didFocus事件。例如，在您的构造函数中有这样的内容

construction(props){
    ...
    this.focusListener = props.navigation.addListener('didFocus', this.onRefresh);
    ...
}

然后取消订阅该事件

componentWillUnmount = () => {
    this.focusListener.remove();
}

Answer 3

我解决了这个问题，另一种解决方法。

屏幕A：

constructor(props) {
        super(props);
    
        this.onRefresh = this.onRefresh.bind(this);

    }


   onRefresh = () => {

         this.setState({
                onRefreshLoading: true,
                orderList:[]
            }, () => {
                this.getOrderListData(1)
            })


    }


  this.props.navigation.navigate('Screen B', {
                            onRefresh: this.onRefresh,
                        })

屏幕B将参数传递给屏幕C

const { state, setParams, navigate } = this.props.navigation;
  const params = state.params || {};

this.props.navigation.navigate('Screen C', {          
  onRefresh: params.onRefresh
 })

屏幕C：

  this.props.navigation.navigate('ScreenA')
   const { state, setParams, navigate } = this.props.navigation;
   const params = state.params || {};
   this.props.navigation.state.params.onRefresh()

反应导航调用特定功能（从屏幕C到屏幕A）

3 个答案: