Как установить значение в локальном хранилище WebView перед загрузкой представления в React Native WebView

Question

Я хочу добавить токен доступа в веб-просмотр перед его загрузкой. По сути, веб-приложение будет считывать токен доступа из хранилища браузера и использовать его для вызова безопасного API.

Поток приложений выглядит следующим образом:

1. Пользователь входит в мобильное приложение и получает токен доступа
2. Затем токен доступа должен быть установлен как свойство хранилища сеанса веб-просмотра, прежде чем он начнет загружаться
3. Веб-приложение считывает токен доступа из хранилища и выполняет вызовы API.

Что я пробовал:

1. onLoadStart - работает много раз, но все еще существует условие состязания между загрузкой вида и впрыском
2. injectJavaScript: использование этого вместе с onLoadStart
3. injectedJavaScript: не работает, поскольку javascript внедряется после начала загрузки представления

Код:

// Inject Access Token
_injectAccessToken = () => {
  const script = `window.sessionStorage.setItem("access_token", "token")`;
  this.webview.injectJavaScript(script);
};


// Render
<WebView
  ref={ref => (this.webview = ref)}
  source={{ uri: `` }}
  onLoadStart={this._injectAccessToken}
  domStorageEnabled={true}
/>;

Что необходимо решить:

Теперь я хочу избавиться от состояния гонки между загрузкой вида и впрыском. Я не обязан использовать это решение, любые другие хитрости или решения будут хороши, пока инъекция произойдет до просмотра нагрузок.

Любые ссылки или предложения на другие статьи приветствуются.

Answer 1

Добавление значения к хранилищу с использованием метода componentWillMount() или constructor() (См. Реагирование на жизненный цикл собственных компонентов )

Затем, чтобы добавить значение к хранилищу, используйтеact-native AsyncStorage,

import AsyncStorage from '@react-native-community/async-storage';
...
async componentWillMount() {
    await AsyncStorage.setItem('key', 'value');
}

ПРИМЕЧАНИЕ: Предыдущий AsyncStorage API от реактивного языка устарел и будет удален в будущем.Он был представлен как отдельный API (@ реагировать-нативное сообщество / асинхронное хранилище)