关于焦点事件的无限循环

Question

Usually, I would use loading modal to wrap part of getting data, like below.

showLoading('loading...');
// TODO:  fetch data, eg: axios.get(....)
hiddenLoading();

The loading modal is a screen in react-navigation. so I maked three screen, first screen is list, second screen is edit screen, third screen is loading modal.

      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="list" component={ListScreen}  />
          <Stack.Screen name="edit" component={EditScreen}  />

          <Stack.Group screenOptions={{
            headerShown: false,
            presentation: 'transparentModal',
            contentStyle: {
              backgroundColor: 'rgba(0,0,0, 0.5)',
              justifyContent: 'center',
              alignItems: 'center'
            }
          }}>
            <Stack.Screen name='loading' component={Loading} />
          </Stack.Group>

        </Stack.Navigator>
      </NavigationContainer>

I would click button in list to edit item. when back come List screen from the edit screen. I want refresh list data.

So, I would call init to loading data in focus function, but entered loading screen before fetch data. when data load finish then go back List screen, the focus event has triggered again.

const ListScreen = ()=>{
...
 const init = async () => {
    navigation.navigate('loading');
    const result = await axios.get('http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    console.log('respones =>', result);
    navigation.goBack();
  };

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      init();   // here has been trigger again, from List screen come back.
    });

    init();
    return unsubscribe;
  }, [navigation]);
...
}

I wish screen can be refresh when come back from loading screen.

Answer 1

Rather than creating a new screen for displaying loading indicator you just simply overlay a view to show loading indicator.

Here is a example code of a loader component

import PropTypes from "prop-types";
import React from "react";
import { ActivityIndicator, Text, View, StyleSheet } from "react-native";
import {
  LOADER_ACTIVITY_INDICATOR_SIZE,
  DEFAULT_LOADER_TEXT,TEXT_TYPE
} from "@resources/Constants";
function Loader(props) {
  let { loading, text } = props;
  let { overlayStyle, textStyle } = styles;
  return (
    <>
      {loading ? (
        <View style={overlayStyle}>
          <ActivityIndicator
            size={LOADER_ACTIVITY_INDICATOR_SIZE}
            color={"#4062E2"}
          />
          <Text style={textStyle} type={TEXT_TYPE.TINY}>{text}</Text>
        </View>
      ) : null}
    </>
  );
}

Loader.propTypes = {
  loading: PropTypes.bool,
  text: PropTypes.string,
  theme: PropTypes.object
};

Loader.defaultProps = {
  text: DEFAULT_LOADER_TEXT,
  loading: false
};

const styles = StyleSheet.create({
  overlayStyle: {
    backgroundColor: "rgba(229, 229, 229, 0.8)",
    justifyContent: "center",
    alignItems: "center",
    height: "100 %",
    width: "100%",
    position: "absolute",
    elevation: 1,
    zIndex: 10
  },
  textStyle: {
    fontSize: 18,
    fontWeight: "bold",
    marginTop: 20,
    color: "#707070"
  }
});


export default Loader;