Question

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

主屏幕（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' />

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

现在，我可以将分数插入db表。问题出在主屏幕中，只有在首次加载应用程序时才执行getTestScoreFromSQLiteDBAndSetState部分。因此，如果我完成Test1，然后按“主页”导航到HomeScreen，则分数不会刷新。

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

编辑：对于遇到类似问题的人，这是我根据接受的答案的第二种解决方案所做的事情：

主屏幕：

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-，您可以在导航之前从test1.js在homeScreen上调用一个函数，只需将一个函数从homescreen传递给test作为参数或作为道具（我不知道它是如何构造的）。在该函数上，只有您要更新的内容，因此对sqlite表和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中更新表时如何刷新从SQLite检索的数据？

1 个答案: