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

【问题标题】：React Native WebView, how to store username and passwordReact Native WebView，如何存储用户名和密码
【发布时间】：2017-01-18 13:32:21
【问题描述】：

我正在为仅使用 webview 的 android 和 iphone/ipad 创建一个非常简单的应用程序。我如何存储用户名和密码，这样用户就不必每次都输入它们。提前致谢。

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 的快速回复。我用注入的Javascript解决了它，即使我在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);

【问题讨论】：

标签： android ios reactjs webview native

【解决方案1】：

我不知道我是否理解正确：您正在编写一个带有本机反应的“缩小浏览器”，仅用于显示您的网页，并且您想在该页面上预先填写登录表单？

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

我会尝试以下方法：

与您的网页通信并为您的登录表单建立一个侦听器，以将凭据传递给您的 RN 应用程序
使用 react-native-simple-store 之类的模块将凭据存储在您的 RN 应用中
如果您下次启动应用程序，请检查您的存储空间，如果凭据不为空，请通过 bridge/injected javascript 将其发送到您的网页

【讨论】：