gpt4 book ai didi

javascript - 如何在React Native Expo中使用Realm?

转载 作者:行者123 更新时间:2023-12-03 00:01:15 39 4
gpt4 key购买 nike

我想在我的 React Native Expo 项目中使用 relamDb。我运行以下命令在我的项目中安装领域-

npm install --save 领域

安装时没有显示任何错误。安装后,在我的项目中我创建了两个类 - App.jsTodoListComponent.js

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import TodoListComponent from './components/TodoListComponent';

export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TodoListComponent/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

TodoListComponent.js

import React, { Component } from 'react';
import { View, FlatList, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import { updateTodoList, deleteTodoList, queryAllTodoLists } from '../databases/allSchemas';
import realm from '../databases/allSchemas';
import Swipeout from 'react-native-swipeout';

import HeaderComponent from './HeaderComponent';
import PopupDialogComponent from './PopupDialogComponent';
let FlatListItem = props => {
const { itemIndex, id, name, creationDate, popupDialogComponent, onPressItem } = props;
showEditModal = () => {
popupDialogComponent.showDialogComponentForUpdate({
id, name
});
}
showDeleteConfirmation = () => {
Alert.alert(
'Delete',
'Delete a todoList',
[
{
text: 'No', onPress: () => { },//Do nothing
style: 'cancel'
},
{
text: 'Yes', onPress: () => {
deleteTodoList(id).then().catch(error => {
alert(`Failed to delete todoList with id = ${id}, error=${error}`);
});
}
},
],
{ cancelable: true }
);
};
return (
<Swipeout right={[
{
text: 'Edit',
backgroundColor: 'rgb(81,134,237)',
onPress: showEditModal
},
{
text: 'Delete',
backgroundColor: 'rgb(217, 80, 64)',
onPress: showDeleteConfirmation
}
]} autoClose={true}>
<TouchableOpacity onPress={onPressItem}>
<View style={{ backgroundColor: itemIndex % 2 == 0 ? 'powderblue' : 'skyblue' }}>
<Text style={{ fontWeight: 'bold', fontSize: 18, margin: 10 }}>{name}</Text>
<Text style={{ fontSize: 18, margin: 10 }} numberOfLines={2}>{creationDate.toLocaleString()}</Text>
</View>
</TouchableOpacity>
</Swipeout >
);
}
export default class TodoListComponent extends Component {
constructor(props) {
super(props);
this.state = {
todoLists: []
};
this.reloadData();
realm.addListener('change', () => {
this.reloadData();
});
}
reloadData = () => {
queryAllTodoLists().then((todoLists) => {
this.setState({ todoLists });
}).catch((error) => {
this.setState({ todoLists: [] });
});
console.log(`reloadData`);
}
render() {
return (<View style={styles.container}>
<HeaderComponent title={"Todo List"}
hasAddButton={true}
hasDeleteAllButton={true}
showAddTodoList={
() => {
this.refs.popupDialogComponent.showDialogComponentForAdd();
}
}
/>
<FlatList
style={styles.flatList}
data={this.state.todoLists}
renderItem={({ item, index }) => <FlatListItem {...item} itemIndex={index}
popupDialogComponent={this.refs.popupDialogComponent}
onPressItem={() => {
alert(`You pressed item `);
}} />}
keyExtractor={item => item.id}
/>
<PopupDialogComponent ref={"popupDialogComponent"} />
</View>);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
},
flatList: {
flex: 1,
flexDirection: 'column',
}
});

在这些编码之后,当我运行应用程序时,它显示以下错误 -

缺少 Realm 构造函数。您是否运行了“react-native linkrealm”?请参阅https://realm.io/docs/react-native/latest/#missing-realm-constructor用于故障排除

Missing Realm constructor error screenshot

我试图从下面的链接中找出问题-

https://github.com/realm/realm-js/issues/1407

https://github.com/realm/realm-js/issues/1340

但这些对我都没有帮助。因此,如果有人能帮助我了解如何在 React Native expo 项目中使用realmDb,那就太好了。

最佳答案

Expo 不支持领域。

您必须退出博览会,然后开始使用领域

请注意,根据文档,Expo 不支持 Realm。

关于javascript - 如何在React Native Expo中使用Realm?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55166731/

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com