Android 和 CouchDB 与本机反应

Question

我正在学习将 react native 用于 Android 应用程序。 我已经在我的文件夹项目 PouchDB 中安装了，我也有 CouchDB。

我正在尝试使用简单的登录和注册表单了解与数据库的连接是如何工作的。

例如，我创建了一个名为 DB.js 的 js 页面，如下所示：

import PouchDB from 'pouchdb-react-native';
PouchDB.plugin(require('pouchdb-find'));
PouchDB.plugin(require('pouchdb-adapter-asyncstorage').default);
PouchDB.plugin(require('pouchdb-authentication'));

class DB {
    constructor(dbName, username, password, protocol, host, port){
        this.remoteDB = null;
        this.localDB = new PouchDB(dbName);
        this.replication(
          'dbName' = ‘myDBName’, 
          'username' = ‘myUsername’, 
          'password' = ‘myPassword’, 
          'protocol' = 'https', 
          'host' = ‘myHost’, 
          'port' = myPortNumber

          );}

      localdb(){
        return this.localDB;
      }

      syncDB(){
        this.localdb().sync(this.remoteDB, {
          live: true,
          retry: true,
          attachments:true,
        }).on('change', function (change) {
        // 
        }).on('paused', function (paused) {
        //  console.log('paused:' + paused)
        }).on('active', function (active) {
        //  console.log('active:' + active)
        }).on('error', function (error) {
        //  console.log('error:' + error)
        });
      }



      replication(dbName, username, password, protocol, host, port){
        this.createDB(dbName, username, password, protocol, host, port);
        this.loginDB(username, password);
      }

在构造函数中，我初始化了数据库，然后进行了同步。

现在，例如，我应该创建一个表单来注册。

Register.js

    import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  Image,
  Alert
} from 'react-native';
import { Actions } from 'react-native-router-flux';


export default class SignUpView extends Component {

  constructor(props) {
    super(props);
    state = {
      fullName: '',
      email   : '',
      password: '',
    }
  }

  // 
  SignInUser(User){
    this.user = {
      _id:id,
      fullName: fullName,
      email: email,
      password: password 
    }

    return new Promise((resolve, reject) => {
      user.localdb().post(this.user)
      .then((response) => {this.user._rev = response.rev; resolve(response)})
      .catch((error) => {reject(error)})
    })
  }


  //

   render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/male-user/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Full name"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(fullName) => this.setState({fullName})}/>
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

        <TouchableHighlight style={[styles.buttonContainer, styles.signupButton]} 
        onPress={ () =>  SignInUser(this.state) }>
          <Text style={styles.signUpText}>Sign up</Text>
        </TouchableHighlight>

        <TouchableHighlight style={[styles.buttonContainer, styles.signupButton]} onPress={() => Actions.scarlet()}>
            <Text style={styles.signUpText}>GoTo Scarlet</Text>
        </TouchableHighlight>
      </View>


    );
  }
}

最后，将信息发布到数据库中的js文件

SignInUser.js

export default class SignInUser {


    SignInUser(User){
    this.user = {
      _id:id,
      fullName: fullName,
      email: email,
      password: password 
    }

    return new Promise((resolve, reject) => {
      user.localdb().post(this.user)
      .then((response) => {this.user._rev = response.rev; resolve(response)})
      .catch((error) => {reject(error)})
    })
  }

}

当我启动模拟器时，函数中出现错误：

onPress={() => this.onClickListener('SignInUser')}>

我不知道错误是由于函数或代码结构不当造成的。既然我想尽可能多地理解，你能帮我一把吗？非常感谢

Answer 1

首先，您的SignInUser 不能是一个类。从 Register 文件中导入 SignInUser。然后把onPress改成：

onPress={ () =>  SignInUser(this.state) }}