Mongodb 与 React Native 形式的连接 [英] Mongodb connection with react native form

问题描述

我在 React Native 中创建了用户表单，我想使用 mongodb 来存储数据.我已经在我的 mongodb.js 中建立了 mongodb 连接，但是我在将它与我的注册页面连接时遇到了问题.我不想用express，因为我的项目很小.

I have created User Form in react native and i want to use mongodb to store data. I have established mongodb connection in my mongodb.js, but i am facing issues in connecting it with my registration page. I don't want to go with express as my project is small.

这里是 mongodb.js:

Here is mongodb.js:

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/mytest";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  db.createCollection("Users", function(err, res) {
    if (err) throw err;
    console.log("Collection created!");
    db.close();
  });

});

这里是 Register.js :

Here is Register.js :

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  StyleSheet,
  KeyboardAvoidingView,
  Image,
  ScrollView,
  Alert,
} from 'react-native';
import FitImage from 'react-native-fit-image';
import {
  Container,
  Content,
  Header,
  Footer,
  Body,
  FooterTab,
  Icon,
  Card,
  CardItem
} from 'native-base';
import moment from 'moment';
import {FormLabel, FormInput, Button} from 'react-native-elements';
import { DatePickerDialog } from 'react-native-datepicker-dialog';
import HTMLView from 'react-native-htmlview';

    export default class Register extends Component {

  constructor(props){
    super(props);
    this.state = {
      dobText: '',
      dobDate: null,
      journeyText: '',
      journeyDate: null,

      name:'',
      surname:'',
      email:'',
      mobilenumber:'',
      password:'',
      dateofbirth:'',
    }
  }
  onDOBPress = () => {
    let dobDate = this.state.dobDate;

    if(!dobDate || dobDate == null){
      dobDate = new Date();
      this.setState({
        dobDate: dobDate
      });
    }

    //To open the dialog
    this.refs.dobDialog.open({
      date: dobDate,
      maxDate: new Date() //To restirct future date
    });

  }
  onDOBDatePicked = (date) => {
   this.setState({
     dobDate: date,
     dobText: moment(date).format('DD-MMM-YYYY')
   });
 }





 Signup=()=>{
   Alert.alert("You pressed me");
   Alert.alert(this.state.name);
   Alert.alert(this.state.dobText);

 }

  render() {

    return (

      <View>
        <ScrollView>
          <Card>
            <CardItem>
            <Content>



        <KeyboardAvoidingView behavior="padding" >
          <FormLabel>Name</FormLabel>
          <FormInput onChangeText={name=>this.setState({name})}/>
          <FormLabel>Surname</FormLabel>
          <FormInput onChangeText={surname=>this.setState({surname})}/>
          <FormLabel>Date of Birth</FormLabel>
          <TouchableOpacity onPress={this.onDOBPress.bind(this)} onChangeText=
        {dateofbirth=>this.setState({dateofbirth})}>
            <View style={styles.datePickerBox}>
              <Text style={styles.datePickerText}>{this.state.dobText}</Text>
              <DatePickerDialog ref="dobDialog" onDatePicked={this.onDOBDatePicked.bind(this)} />
            </View>
          </TouchableOpacity>


          <FormLabel>Email</FormLabel>
          <FormInput onChangeText={email=>this.setState({email})}/>
          <FormLabel>Mobile Number</FormLabel>
          <FormInput onChangeText={mobilenumber=>this.setState({mobilenumber})}/>
          <FormLabel>Password</FormLabel>
          <FormInput secureTextEntry onChangeText={password=>this.setState({password})}/>
          <TouchableOpacity >
            <Button
              icon={{name: 'send'}}
              title='Submit Details'
              backgroundColor="#4286f4"
              onPress={this.Signup}
            />
          </TouchableOpacity>
        </KeyboardAvoidingView>
        </Content>
      </CardItem>

      </Card>
    </ScrollView>
  </View>

);

  }

}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green'
  },
  Label:{
    fontSize: 20,
  },
  form: {
    alignSelf: 'stretch',
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
  },
  TextStyle: {
    width: 250,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    color: 'lightgreen'
  },
  TouchStyle: {
    width: 250,
    backgroundColor: 'blue',
    justifyContent: 'center',
    marginTop: 20
  },
  TouchText: {
    alignItems: 'center',
    textAlign: 'center',
    justifyContent: 'center',
    fontSize: 20,
    color: 'white'
  },
  content: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  datePickerBox:{
   marginTop: 9,
   borderColor: '#ABABAB',
   borderWidth: 0.5,
   padding: 0,
   borderTopLeftRadius: 4,
   borderTopRightRadius: 4,
   borderBottomLeftRadius: 4,
   borderBottomRightRadius: 4,
   height: 28,
   justifyContent:'center'
 },
  datePickerText: {
    fontSize: 14,
    marginLeft: 5,
    borderWidth: 0,
    color: '#121212',
  },
});

请告诉我怎么做，任何帮助将不胜感激.谢谢.

Please tell me how to do it, any help will be appreciated . Thanks.

推荐答案

我认为你应该使用你的机器 IP 而不是 localhost.它应该是这样的.

I think you should use your machine IP instead of localhost. It should look like this.

var url = "mongodb://192.168.8.5:27017/mytest";

如果不起作用，则使用 http 或 https 而不是 mongodb

If not working then use http or https instead of mongodb

var url = "http://192.168.8.5:27017/mytest";

var url = "https://192.168.8.5:27017/mytest";

这篇关于Mongodb 与 React Native 形式的连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！