Как обновить данные, полученные из SQLite, когда таблица обновляется в React Native? - PullRequest
0 голосов
/ 05 апреля 2019

На моем домашнем экране есть кнопки, которые ведут на разные экраны, где проводится тест. Когда пользователь завершает тест, счет вставляется в файл базы данных SQLite. Когда пользователь нажимает «Домой», чтобы вернуться на главный экран, я хочу отобразить новый результат в разделе результатов. Примерно так:

Главный экран (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' />

Это базовая настройка, я не собираюсь публиковать полные коды, так как она становится слишком грязной.

Прямо сейчас я могу вставить счет в таблицу БД. Проблема в HomeScreen, часть getTestScoreFromSQLiteDBAndSetState выполняется только при первой загрузке приложения. Поэтому, если я закончу Test1, а затем нажмите «Домой», чтобы перейти на HomeScreen, счет не обновится.

Есть ли какая-либо техника в React Native для достижения этой цели?


EDIT: Для тех, кто сталкивается с подобной проблемой, вот что я сделал на основе решения № 2 принятого ответа:

HomeScreen:

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();

1 Ответ

1 голос
/ 05 апреля 2019

Что происходит, когда вы возвращаетесь 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...