React Native WebView，如何存储用户名和密码

Question

我正在为Android和iPhone/iPad创建一个非常简单的应用程序，仅使用Webview。如何存储用户名和密码，以便用户不必每次都重新输入它们。提前致谢。

import React, { Component } from 'react';
import {
  AppRegistry,
  WebView
} from 'react-native';

export default class myapp extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://mysecretappurl.com'}}
      />
    );
  }
}

AppRegistry.registerComponent('myapp', () => myapp);

感谢Fabian快速回应。 我用injectedJavascript解决了这个问题，即使在Android和iOS上关闭并重新启动应用程序，数据也会持久保存。一开始尝试使用asyncstorage和reactnativ-webview-bridge，但由于我的知识不足而无法实现。

import React, { Component } from 'react';
import {
  AppRegistry,
  WebView
} from 'react-native';

export default class myapp extends Component {
  render() {
    let jsCode = `
        var cookie={};
        document.cookie.split('; ').forEach(function(i){cookie[i.split('=')[0]]=i.split('=')[1]});
        document.querySelector('#email').value=cookie['email'] || '';
        document.querySelector('#password').value=cookie['password'] || '';
        document.querySelector('#login button').onclick = function(){
            document.cookie = 'email='+document.querySelector('#email').value;
            document.cookie = 'password='+document.querySelector('#password').value;
        };
    `;
    return (
      <WebView
        source={{uri: 'https://mysecretappurl.com'}}
        injectedJavaScript={jsCode}
      />
    );
  }
}

AppRegistry.registerComponent('myapp', () => myapp);

- Hendrik Kangro

Answer 1

我不确定我是否正确理解了您的意思： 您要使用React Native编写“缩小版浏览器”，仅用于显示您的网页，并希望在该页面上预填登录表单？

如果是这样，您正在寻找一种从React Native应用程序与WebView组件中的页面交换数据的可能性。请参阅react-native-webview-bridge的本教程。

我建议尝试以下内容：

- 与您的网页通信，并为登录表单建立一个监听器，以将凭据传递给RN应用程序 - 使用像react-native-simple-store这样的模块，在RN应用程序中存储凭据 - 如果下次启动应用程序时检查存储，如果凭据不为空，则通过桥接/注入的JavaScript将它们发送到您的网页

- Fabian