返回导航中的按钮操作

Question

我在一个小应用中有这样的导航：

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
        <Stack.Screen name='Learning' component={Learning}
          options={({ route }) => ({
            title: route.params.screen
          })} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

在学习屏幕中，我写信给AsyncStorage

当我return到主屏幕时我想显示这个内容（来自AsyncStorage）

如何在 Home 中调用一个函数，它从 AsyncStorage 接收数据后立即从 Learning returns 接收数据屏幕到主屏幕?

Answer 1

您将在文档中找到它：

https://reactnavigation.org/docs/function-after-focusing-screen/

您可以使用useIsFocused

import * as React from 'react';
import { Text } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

function Profile() {
  // This hook returns `true` if the screen is focused, `false` otherwise
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

如果你想让它在返回后刷新屏幕，在 Home:

做这样的事情

function Home(props) {
    const isFocused = useIsFocused();

    useEffect(() => {
        if (isFocused) {
            // Do something
        }
    });

// Rest of code

返回导航中的按钮操作

Button operation back in navigation

react-native

react-native-navigation

react-hooks