Работа кнопки назад в навигации

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>
  )
}

На экране Learning я пишу AsyncStorage

Когда я возвращаюсь к Главный экран Я хотел бы отобразить этот контент (из AsyncStorage)

Как вызвать функцию в Home , которая получает данные от AsyncStorage, как только он возвращается с экрана обучения на домашний экран ?

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>;
}

Если вы хотите чтобы обновить экран sh после goBack, сделайте что-то подобное в Home:

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

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

// Rest of code