Question

我正在为仅使用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的快速回复。我用injectJavascript解决了它，即使我关闭并重新启动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

我不知道我是否理解正确：您正在编写一个缩小的浏览器＆＃34; with react本身只显示您的网页，并且您想要在该页面上预填充登录表单？

如果确实如此，您正在寻找将React Native应用程序中的数据与WebView组件中的页面进行交换的可能性。看看this tutorial of react-native-webview-bridge。

我会尝试以下方法：

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

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

1 个答案: