在 React Native 中更新 table 时如何刷新从 SQLite 检索的数据？

Question

在我的主屏幕上，我有一些按钮可以转到进行测试的不同屏幕。当用户完成测试时，分数将被插入到 SQLite 数据库文件中。当用户单击 "Home" 返回主屏幕时，我想在结果部分显示新分数。像这样：

主屏幕（App.js）：

import Test1 from './Tests/Test1";

class HomeScreen extends React.Component { 
   constructor(props) {
      super(props);

      this.state = {
          test1Score: 0,
      }

      //Retrieve last test score from SQLite table
      //setState for test1Score
      getTestScoreFromSQLiteDBAndSetState();
   }

   render() {
      return(
         <Button onPress={this.gotoTest1()} />
         <Text>Last test result: {this.state.test1Score}</Text>
   )}
}

Test1.js:

onTestComlete() {
   //insert the test score to the SQLite table
   insertTestScoreToSQLiteDB();
}

<Button onPress={navigation.navigate('HomeScreen')} title='Home' />

这是基本设置，我不会 post 完整代码，因为它太乱了。

现在我可以将乐谱插入数据库 table。问题出在 HomeScreen，getTestScoreFromSQLiteDBAndSetState 部分仅在第一次加载应用程序时执行。因此，如果我完成测试 1，然后按 "Home" 导航到主屏幕，分数不会刷新。

React Native 有什么技术可以做到这一点吗？

编辑：对于遇到类似问题的人，这是我根据已接受答案的 #2 解决方案所做的：

主屏幕：

navigateToTest1 = () => {
   this.props.navigation.navigate('test1', {
       updateResult: this.updateTest1Results.bind(this)
   });
}

updateTest1Results = () => {
    //codes to retrieve result and setState goes here
}

Test1.js:

const { params } = this.props.navigation.state;
params.updateResult();

Answer 1

发生的事情是当你返回时 react-navigation 不会再次加载你的屏幕只是显示之前的内容以获得更好的性能。你有很多可能性，其中一些看起来像这样：

1- 而不是使用 navigation.navigate() 使用 navigation.push() 这将创建一个新屏幕，因此它将更新任何要更新的内容。

2- 您可以在导航之前从 homeScreen 调用 test1.js 上的函数，只需将函数从 homescreen 传递到 test 作为参数或道具（我不知道它是如何构造的）。在那个函数上只有你想要更新的东西，所以调用 sqlite table 和 setState

3- 使用 react-navigation 个事件。

<NavigationEvents
  onWillFocus={payload => console.log('will focus',payload)}
  onDidFocus={payload => console.log('did focus',payload)}
  onWillBlur={payload => console.log('will blur',payload)}
  onDidBlur={payload => console.log('did blur',payload)}
/>

有关 react-navigation 事件的更多信息，请参阅 this
有关 navigation.push() 的更多信息，请参阅 this

在 React Native 中更新 table 时如何刷新从 SQLite 检索的数据？

How to refresh data retrieved from SQLite when table is updated in React Native?

sqlite

page-refresh

react-native