使用 Hooks 使用 React Native 返回时刷新屏幕 A

Question

我有一个简单的疑问，希望有人能帮助我。我有一个简单的应用程序，它有一个主屏幕，其中加载了我从 SQLite 数据库获取的所有数据，但是，当我转到 'Add To The Database Screen' 并在数据库中添加一些数据和记录时，我使用一个函数去返回上一屏幕 (props.navigation.goBack())。

不幸的是，当我到达屏幕 A 时，我的钩子没有 'refresh' 或更新数据库中的数据。有没有办法让它刷新屏幕 A 以对数据库进行新调用并使用新数据刷新数据？

ps: 为了调用数据库，我使用今天的日期在查询中获取数据，所以我的日期没有更新。

这是我的代码：

ScreenA.js

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default function ScreenA() {

   const [data, setData] = useState([]);

    useEffect(() => {
        setData(getDataFromApi())
    }, []);

    return(
        <View>
            { apiResponse() }
            <TouchableOpacity onPress={() => { props.navigation.navigate('ScreenB') }}
                <Text>Add data</Text>
            </TouchableOpacity>
        </View>
    )
}

这里是 ScreenB.js

import React, { useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default function ScreenB() {

    function goBackToScreenA() {
        addDataToDatabase();
        props.navigation.goBack();
    }

    return(
        <View>
            <TouchableOpacity onPress={() => { goBackToScreenA() }}>
                <Text>Go Back</Text>
            </TouchableOpacity>
        </View>
    );
}

Answer 1

我已通过终止组件转到 ScreenB 来修复此错误，我只是使用 props.navigation.replace('ScreenB') 而不是使用 navigate。所以，当我回到 ScreenA 时，它只是再次加载 ScreenA。就像第一次一样。在 goBack() 中我做同样的事情，在将数据添加到数据库后用 replace('ScreenA') 更改返回。

Answer 2

如果您使用的是 reactnavigation，那么您可以订阅导航生命周期

 React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
  // Screen was focused
  // Do something
});

    return unsubscribe;
  }, [navigation]);

https://reactnavigation.org/docs/navigation-lifecycle

Answer 3

import { useCallback } from 'react';
import { useFocusEffect } from '@react-navigation/native';

export default function ScreenA() {
    useFocusEffect(
        useCallback(() => {
            setData(getDataFromApi());
        }, [])
    );
}

Answer 4

您可以实现将道具传递到下一个屏幕。当从该屏幕返回时需要调用该道具。

例如

屏幕A

onBackEvent=(event)=>{console.log(event)}

onPress=()=>{
this.props.navigation.navigate("ScreenB",{onBackEvent:this.onBackEvent.bind(this)})
}

屏幕B 当你回去时，只需在 back

之前添加这一行

this.props.route.params.onBackEvent({update:true})

使用 Hooks 使用 React Native 返回时刷新屏幕 A

Refresh Screen A when goBack with React Native using Hooks

javascript

reactjs

react-native

react-native-android

react-navigation