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

Answer 1

不知道我理解的对不对：你正在写一个 "minified browser" 和 react native 只是为了显示你的网页并且你想在该页面上预填写登录表单？

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

我会尝试以下方法：

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

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

React Native WebView, how to store username and password

android

native

webview

ios

reactjs