React native 错误：在react native中使用WatermelonDB时，DatabaseBridge为空

我是个新来的本地人。在创建应用程序时，我遇到了一个错误，上面写着“null不是一个对象”。我在互联网上进行了研究，但还没有找到解决方案

我正在使用

expo

和

watermelondb

错误

TypeError: null is not an object (evaluating 'DatabaseBridge[methodName]')  

App.js

import { AppRegistry } from "react-native";
import { name as appName } from "./app.json";

import { Database } from "@nozbe/watermelondb";
import SQLiteAdapter from "@nozbe/watermelondb/adapters/sqlite";
import { mySchema } from "./app/models/schema";
import { dbModels } from "./app/models/index.js";

// Added new import
import { createNavigation } from "./app/screens/Navigation";

// First, create the adapter to the underlying database:
const adapter = new SQLiteAdapter({
  dbName: "StudentTable",
  schema: mySchema
});

// Then, make a Watermelon database from it!
const database = new Database({
  adapter,
  modelClasses: dbModels
});


const Navigation = createNavigation({ database });

AppRegistry.registerComponent(appName, () => Navigation);

import React, { Component } from "react";
import {
  View,
  Button,
  Container,
  Content,
  Form,
  Item,
  Input,
  Label,
  Textarea,
  Picker,
  Body,
  Text,
  DatePicker
} from "native-base";
import {RadioButton} from "react-native-paper"
import { studentStd } from "../models/randomData";
import { date } from "@nozbe/watermelondb/decorators";

class Tution extends Component {
  constructor(props) {
    super(props);
    this.state={
      toggle:true,
    }
    if (props.student) {
      this.state = { ...props.student.getStudent() };
    } else {
      this.state = {};
    }
  }


  render() {
    const [checked,setChecked]=React.useState('Bank')
    return (
      <Container>
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>StudentName</Label>
              <Input
                onChangeText={StudentName => this.setState({ StudentName })}
                value={this.state.StudentName}
              />
            </Item>
            <View style={{ paddingLeft: 15 }}>
              <Item picker>
                <Picker
                  mode="dropdown"
                  style={{ width: undefined, paddingLeft: 15 }}
                  placeholder="Std"
                  placeholderStyle={{ color: "#bfc6ea" }}
                  placeholderIconColor="#007aff"
                  selectedValue={this.state.Std}
                  onValueChange={Std => this.setState({ Std })}
                >
                  {studentStd.map((Std, i) => (
                    <Picker.Item key={i} label={Std} value={Std} />
                  ))}
                </Picker>
              </Item>
            </View>


            <View style={{ paddingLeft: 15, marginTop: 15 }}>
              <Text style={{ color: "gray" }}>Date</Text>
              <DatePicker
                locale={"en"}
                animationType={"fade"}
                androidMode={"default"}
                placeHolderText="Date"
                defaultDate={new Date()}
                onDateChange={FeesDate => this.setState({ FeesDate })}
              />
              <Text>
                {this.state.date &&
                  this.state.date.toString().substr(4, 12)}
              </Text>

              <Text style={{ color: "gray", marginTop: 15 }}>Bank/Cash</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Bank/Cash"
                onChangeText={bankorcash => this.setState({ bankorcash })}
                value={this.state.bankorcash}
              />

<Text style={{ color: "gray", marginTop: 15 }}>Rtgs No</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="rtgsno"
                onChangeText={rtgsno => this.setState({ rtgsno })}
                value={this.state.rtgsno}
              />
              <Text style={{ color: "gray", marginTop: 15 }}>Received Amt</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Received Amt"
                onChangeText={recd => this.setState({ recd })}
                value={this.state.recd}
              />
              <Text style={{ color: "gray", marginTop: 15 }}>Pending</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Pending"
                onChangeText={pending => this.setState({ pending })}
                value={this.state.pending}
              />
                    <Text style={{ color: "gray", marginTop: 15 }}>Days Attended</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Days"
                onChangeText={daysattended => this.setState({ daysattended })}
                value={this.state.daysattended}
              />
            </View>
            

            <Body>
              <Button onPress={this.handleSubmit}>
                <Text>{this.props.student ? "Update " : "Add "} Movie</Text>
              </Button>
            </Body>
          </Form>
        </Content>
      </Container>
    );
  }

  handleSubmit = () => {
    if (this.props.student) {
      this.handleUpdateStudent();
    } else {
      this.handleAddNewStudent();
    }
  };

  handleAddNewStudent = async () => {
    const { database } = this.props;
    const students = database.collections.get("students");
    const newStudent = await movies.create(student => {
      student.StudentName=this.state.StudentName,
      student.Std=this.state.Std,
      student.bankorcash=this.state.bankorcash,
      student.rtgsno=this.state.rtgsno,
      student.recd=this.state.recd,
      student.pending=this.state.pending,
      student.daysattended=this.state.daysattended,
      student.date=this.state.date
    });
    this.props.navigation.goBack();
  };

  handleUpdateStudent = async () => {
    const { student } = this.props;
    await student.updateStudent({
      StudentName:this.state.StudentName,
      Std:this.state.Std,
    bankorcash:this.state.bankorcash,
     rtgsno:this.state.rtgsno,
      recd:this.state.recd,
     pending:this.state.pending,
    daysattended:this.state.daysattended,
   date:this.state.date
    });
    this.props.navigation.goBack();
  };
}

export default Tution;

导航

import React from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import 'react-native-gesture-handler';

import Root from "./Root";
import Student from "./Student";
import Tution from "./Tution";

export const createNavigation = props =>
  createAppContainer(
    createStackNavigator(
      {
        Root: {
          // We have to use a little wrapper because React Navigation doesn't pass simple props (and withObservables needs that)
          screen: ({ navigation }) => {
            const { database } = props;
            return <Root database={database} navigation={navigation} />;
          },
          navigationOptions: { title: "Students" }
        },
        Student: {
          screen: ({ navigation }) => (
            <Student
              student={navigation.state.params.student}
              navigation={navigation}
            />
          ),
          navigationOptions: ({ navigation }) => ({
            StudentName: navigation.state.params.student.StudentName
          })
        },
        NewStudent: {
          screen: ({ navigation }) => {
            const { database } = props;
            return <Tution database={database} navigation={navigation} />;
          },
          navigationOptions: { title: "New Student" }
        },
        EditStudent: {
          screen: ({ navigation }) => {
            return (
              <MovieForm
                student={navigation.state.params.student}
                navigation={navigation}
              />
            );
          },
          navigationOptions: ({ navigation }) => ({
            title: `Edit "${navigation.state.params.student.StudentName}"`
          })
        }
      },
      {
        initialRouteName: "Root",
        initialRouteParams: props
      }
    )
  );

从“React”导入React；
从“react navigation”导入{createStackNavigator，createAppContainer}；
导入“反应本机手势处理程序”；
从“/Root”导入根目录；
从“/Student”导入学生；
从“/Tution”导入Tution；
导出常量createNavigation=props=>
createAppContainer(
createStackNavigator(
{
根目录：{
//我们必须使用一个小包装器，因为React导航不会传递简单的道具（而withObservables需要这样做）
屏幕：（{navigation}）=>{
const{database}=props；
返回；
},
导航选项：{标题：“学生”}
},
学生：{
屏幕：（{navigation}）=>(
),
导航选项：（{navigation}）=>({
StudentName:navigation.state.params.student.StudentName
})
},
新闻学生：{
屏幕：（{navigation}）=>{
const{database}=props；
返回；
},
导航选项：{标题：“新学生”}
},
编辑学生：{
屏幕：（{navigation}）=>{
返回(
);
},
导航选项：（{navigation}）=>({
标题：`编辑“${navigation.state.params.student.StudentName}”`
})
}
},
{
initialRouteName:“根”，
初始路线图：道具
}
)
);

我怀疑的文件Tution.js

import { AppRegistry } from "react-native";
import { name as appName } from "./app.json";

import { Database } from "@nozbe/watermelondb";
import SQLiteAdapter from "@nozbe/watermelondb/adapters/sqlite";
import { mySchema } from "./app/models/schema";
import { dbModels } from "./app/models/index.js";

// Added new import
import { createNavigation } from "./app/screens/Navigation";

// First, create the adapter to the underlying database:
const adapter = new SQLiteAdapter({
  dbName: "StudentTable",
  schema: mySchema
});

// Then, make a Watermelon database from it!
const database = new Database({
  adapter,
  modelClasses: dbModels
});


const Navigation = createNavigation({ database });

AppRegistry.registerComponent(appName, () => Navigation);

import React, { Component } from "react";
import {
  View,
  Button,
  Container,
  Content,
  Form,
  Item,
  Input,
  Label,
  Textarea,
  Picker,
  Body,
  Text,
  DatePicker
} from "native-base";
import {RadioButton} from "react-native-paper"
import { studentStd } from "../models/randomData";
import { date } from "@nozbe/watermelondb/decorators";

class Tution extends Component {
  constructor(props) {
    super(props);
    this.state={
      toggle:true,
    }
    if (props.student) {
      this.state = { ...props.student.getStudent() };
    } else {
      this.state = {};
    }
  }


  render() {
    const [checked,setChecked]=React.useState('Bank')
    return (
      <Container>
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>StudentName</Label>
              <Input
                onChangeText={StudentName => this.setState({ StudentName })}
                value={this.state.StudentName}
              />
            </Item>
            <View style={{ paddingLeft: 15 }}>
              <Item picker>
                <Picker
                  mode="dropdown"
                  style={{ width: undefined, paddingLeft: 15 }}
                  placeholder="Std"
                  placeholderStyle={{ color: "#bfc6ea" }}
                  placeholderIconColor="#007aff"
                  selectedValue={this.state.Std}
                  onValueChange={Std => this.setState({ Std })}
                >
                  {studentStd.map((Std, i) => (
                    <Picker.Item key={i} label={Std} value={Std} />
                  ))}
                </Picker>
              </Item>
            </View>


            <View style={{ paddingLeft: 15, marginTop: 15 }}>
              <Text style={{ color: "gray" }}>Date</Text>
              <DatePicker
                locale={"en"}
                animationType={"fade"}
                androidMode={"default"}
                placeHolderText="Date"
                defaultDate={new Date()}
                onDateChange={FeesDate => this.setState({ FeesDate })}
              />
              <Text>
                {this.state.date &&
                  this.state.date.toString().substr(4, 12)}
              </Text>

              <Text style={{ color: "gray", marginTop: 15 }}>Bank/Cash</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Bank/Cash"
                onChangeText={bankorcash => this.setState({ bankorcash })}
                value={this.state.bankorcash}
              />

<Text style={{ color: "gray", marginTop: 15 }}>Rtgs No</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="rtgsno"
                onChangeText={rtgsno => this.setState({ rtgsno })}
                value={this.state.rtgsno}
              />
              <Text style={{ color: "gray", marginTop: 15 }}>Received Amt</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Received Amt"
                onChangeText={recd => this.setState({ recd })}
                value={this.state.recd}
              />
              <Text style={{ color: "gray", marginTop: 15 }}>Pending</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Pending"
                onChangeText={pending => this.setState({ pending })}
                value={this.state.pending}
              />
                    <Text style={{ color: "gray", marginTop: 15 }}>Days Attended</Text>
              <Textarea
                rowSpan={5}
                bordered
                placeholder="Days"
                onChangeText={daysattended => this.setState({ daysattended })}
                value={this.state.daysattended}
              />
            </View>
            

            <Body>
              <Button onPress={this.handleSubmit}>
                <Text>{this.props.student ? "Update " : "Add "} Movie</Text>
              </Button>
            </Body>
          </Form>
        </Content>
      </Container>
    );
  }

  handleSubmit = () => {
    if (this.props.student) {
      this.handleUpdateStudent();
    } else {
      this.handleAddNewStudent();
    }
  };

  handleAddNewStudent = async () => {
    const { database } = this.props;
    const students = database.collections.get("students");
    const newStudent = await movies.create(student => {
      student.StudentName=this.state.StudentName,
      student.Std=this.state.Std,
      student.bankorcash=this.state.bankorcash,
      student.rtgsno=this.state.rtgsno,
      student.recd=this.state.recd,
      student.pending=this.state.pending,
      student.daysattended=this.state.daysattended,
      student.date=this.state.date
    });
    this.props.navigation.goBack();
  };

  handleUpdateStudent = async () => {
    const { student } = this.props;
    await student.updateStudent({
      StudentName:this.state.StudentName,
      Std:this.state.Std,
    bankorcash:this.state.bankorcash,
     rtgsno:this.state.rtgsno,
      recd:this.state.recd,
     pending:this.state.pending,
    daysattended:this.state.daysattended,
   date:this.state.date
    });
    this.props.navigation.goBack();
  };
}

export default Tution;

import React，{Component}来自“React”；
进口{
看法
按钮
集装箱，
内容,，
形式，
项目,，
输入，
标签，
文本区，
皮克，
身体，
文本，
日期选择器
}来自“本土基地”；
从“react native paper”导入{RadioButton}
从“./models/randomData”导入{studentStd}；
从“@nozbe/watermelondb/decorators”导入{date}”；
类Tution扩展了组件{
建造师（道具）{
超级（道具）；
这个州={
切换：对，
}
如果（学生道具）{
this.state={…props.student.getStudent（）}；
}否则{
this.state={}；
}
}
render（）{
const[checked，setChecked]=React.useState（'Bank'）
返回(
学生姓名
this.setState（{StudentName}）
值={this.state.StudentName}
/>
this.setState（{Std}）}
>
{studentStd.map（（Std，i）=>(
))}
日期
this.setState（{FeesDate}）
/>
{this.state.date&&
this.state.date.toString（）.substr（4,12）}
银行/现金
this.setState（{bankorcash}）
值={this.state.bankorcash}
/>
Rtgs号
this.setState（{rtgsno}）}
值={this.state.rtgsno}
/>
收到金额
this.setState（{recd}）}
值={this.state.recd}
/>
悬而未决的
this.setState（{pending}）}
值={this.state.pending}
/>
出席的日子
this.setState（{daysattended}）
值={this.state.daystated}
/>
{this.props.student？“更新”：“添加”}电影
);
}
handleSubmit=（）=>{
如果（这个.道具.学生）{
此.handleUpdateStudent（）；
}否则{
此.HandLeadNewStudent（）；
}
};
HandLeadNewStudent=async（）=>{
const{database}=this.props；
const students=database.collections.get（“学生”）；
const newStudent=等待电影。创建（学生=>{
student.StudentName=this.state.StudentName，
student.Std=this.state.Std，
student.bankorcash=this.state.bankorcash，
student.rtgsno=this.state.rtgsno，
student.recd=this.state.recd，
student.pending=this.state.pending，
student.daysattended=this.state.daysattended，
student.date=this.state.date
});
this.props.navigation.goBack（）；
};
handleUpdateStudent=async（）=>{
const{student}=this.props；
等待学生。更新学生({
StudentName:this.state.StudentName，
Std:this.state.Std，
班科卡什：这个州，班科卡什，
rtgsno:this.state.rtgsno，
记录：this.state.recd，
待定：this.state.pending，
daysattended:this.state.daysattended，
日期：this.state.date
});
this.props.navigation.goBack（）；
};
}
出口违约；

Navigation.js：

从“React”导入React； 从“react navigation”导入{createStackNavigator，createAppContainer}

从“/Root”导入根目录；
从“/Student”导入学生；
从“/Tution”导入Tution；
导出常量createNavigation=props=>
createAppContainer(
createStackNavigator(
{
根目录：{
//我们必须使用一个小包装器，因为React导航不会传递简单的道具（而withObservables需要这样做）
屏幕：（{navigation}）=>{
const{database}=props；
返回；
},
导航选项：{标题：“学生”}
},
学生：{
屏幕：（{navigation}）=>(