Android和CouchDB反应原生

Question

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

我正在尝试使用简单的登录和注册表单来理解与db的连接是如何工作的。

例如，我创建了一个名为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不能成为一个班级。从SignInUser文件中导入Register。然后将onPress更改为：

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