واردکردن اطلاعات در دیتابیس Realm در React Native
دیتابیس Realm رو میشه نسل جدید دیتابیس های موبایل دانست که در اپلیکیشین های React Native برای هر دو پلتفرم Android و Ios استفاده میشه.این پایگاه داده با SQLite منطبق نیست و در بسیاری از موارد از SQLite به دلیل مستقل بودنش از پلتفرم بهتر است.در آموزش متنی قبلی نحوه نصب Realm در React Native رو یاد گرفتیم و این مقاله نحوه وارد کردن اطلاعات در Realm رو یاد میگیریم.در این آموزش با استفاده از یک کامپوننت TextInput و در رویداد کلیک button اطلاعات رو در Realm ذخیره میکنیم.
1.در اولین گام باید دیتابیس realm رو در پروژه نصب کنیم.برای این منظور دایرکتوری پروژه رو در command prompt / Terminal باز میکنیم و دستور زیر رو اجرا میکنیم.
|
1 |
npm install --save realm |
2.بعد از نصب موفقیت آمیز کتابخانه از دستور زیر برای refresh شدن کامل پروژه و ایندکس شدن Realm به پروژه استفاده میکنیم.
|
1 |
react-native link realm |
3.ایمپورت کردن کامپوننت های StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity و Alert در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from 'react-native'; |
4.ایمپورت کردن ماژول Realm و ایجاد یک متغیر به نام let .با استفاده از این متغیر دیتابیس رو باز و بسته میکنیم.
|
1 2 3 |
var Realm = require('realm'); let realm ; |
5.ایجاد سازنده و تعریف 3 State به نام های Student_Name, Student_Class و Student_Subject . این state ها برای نگه داری داده های TextInput مورد استفاده قرار میگیره.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
constructor(){ super(); this.state = { Student_Name : '', Student_Class : '', Student_Subject : '' } } |
6.یک Schema(Table) درون سازنده به نام Student_Info با چهار ستون به نام های student_id, student_name, student_class و student_subject ایجاد میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
constructor(){ super(); this.state = { Student_Name : '', Student_Class : '', Student_Subject : '' } realm = new Realm({ schema: [{name: 'Student_Info', properties: { student_id: {type: 'int', default: }, student_name: 'string', student_class: 'string', student_subject: 'string' }}] }); } |
7.ایجاد یک تابع به نام ()add_Student .ما این تابع رو در رویداد کلیک button فراخوانی میکنیم.در این تابع ما یک record جدید در دیتابیس Realm اضافه میکنیم.مقدار ID رو بصورت اتوماتیک افزایش میدیم و این ستون برای همیشه unique است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
add_Student=()=>{ realm.write(() => { var ID = realm.objects('Student_Info').length + 1; realm.create('Student_Info', { student_id: ID, student_name: this.state.Student_Name, student_class: this.state.Student_Class, student_subject : this.state.Student_Subject }); }); Alert.alert("Student Details Added Successfully.") } |
8.ایجاد یک متغیر به نام A درون بلاک render’s و دخیره کردن تمامی objects های درون دیتابیس در این متغیر.همه داده ها رو به JSON با استفاده از ()JSON.stringify تبدیل میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { var A = realm.objects('Student_Info'); var myJSON = JSON.stringify(A); return ( ); } |
9.اضافه کردن 3 کامپوننت TextInput ،یک Button و یک Text درون بلاک render’s return
TextInput : برای گرفتن اطلاعات کاربر در اپلیکیشن مورد استفاده قرار میگیرد.
Button : از این کامپوننت برای فراخوانی تابع ()add_Student و ثبت اطلاعات در دیتابیس استفاده میکنیم.
Text : برای نمایش تمامی object های موجود در دیتابیس که با موفقیت ثبت شده اند،استفاده میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
render() { var A = realm.objects('Student_Info'); var myJSON = JSON.stringify(A); return ( <View style={styles.MainContainer}> <TextInput placeholder="Enter Student Name" style = { styles.TextInputStyle } underlineColorAndroid = "transparent" onChangeText = { ( text ) => { this.setState({ Student_Name: text })} } /> <TextInput placeholder="Enter Student Class" style = { styles.TextInputStyle } underlineColorAndroid = "transparent" onChangeText = { ( text ) => { this.setState({ Student_Class: text })} } /> <TextInput placeholder="Enter Student Subject" style = { styles.TextInputStyle } underlineColorAndroid = "transparent" onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} } /> <TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text> </TouchableOpacity> <Text style={{marginTop: 10}}>{myJSON}</Text> </View> ); } |
10.ایجاد استایل سفارشی.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
const styles = StyleSheet.create({ MainContainer :{ flex:1, alignItems: 'center', justifyContent: 'center', paddingTop: (Platform.OS) === 'ios' ? 20 : , margin: 10 }, TextInputStyle: { borderWidth: 1, borderColor: '#009688', width: '100%', height: 40, borderRadius: 10, marginBottom: 10, textAlign: 'center', }, button: { width: '100%', height: 40, padding: 10, backgroundColor: '#4CAF50', borderRadius:7, marginTop: 12 }, TextStyle:{ color:'#fff', textAlign:'center', } }); |
11.کد کامل برنامه در فایل App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from 'react-native'; var Realm = require('realm'); let realm ; export default class App extends Component{ constructor(){ super(); this.state = { Student_Name : '', Student_Class : '', Student_Subject : '' } realm = new Realm({ schema: [{name: 'Student_Info', properties: { student_id: {type: 'int', default: }, student_name: 'string', student_class: 'string', student_subject: 'string' }}] }); } add_Student=()=>{ realm.write(() => { var ID = realm.objects('Student_Info').length + 1; realm.create('Student_Info', { student_id: ID, student_name: this.state.Student_Name, student_class: this.state.Student_Class, student_subject : this.state.Student_Subject }); }); Alert.alert("Student Details Added Successfully.") } render() { var A = realm.objects('Student_Info'); var myJSON = JSON.stringify(A); return ( <View style={styles.MainContainer}> <TextInput placeholder="Enter Student Name" style = { styles.TextInputStyle } underlineColorAndroid = "transparent" onChangeText = { ( text ) => { this.setState({ Student_Name: text })} } /> <TextInput placeholder="Enter Student Class" style = { styles.TextInputStyle } underlineColorAndroid = "transparent" onChangeText = { ( text ) => { this.setState({ Student_Class: text })} } /> <TextInput placeholder="Enter Student Subject" style = { styles.TextInputStyle } underlineColorAndroid = "transparent" onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} } /> <TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text> </TouchableOpacity> <Text style={{marginTop: 10}}>{myJSON}</Text> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ flex:1, alignItems: 'center', justifyContent: 'center', paddingTop: (Platform.OS) === 'ios' ? 20 : , margin: 10 }, TextInputStyle: { borderWidth: 1, borderColor: '#009688', width: '100%', height: 40, borderRadius: 10, marginBottom: 10, textAlign: 'center', }, button: { width: '100%', height: 40, padding: 10, backgroundColor: '#4CAF50', borderRadius:7, marginTop: 12 }, TextStyle:{ color:'#fff', textAlign:'center', } }); |
اسکرین شات در Android device:
اسکرین شات در iOS device :
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
10 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
توی حالت class باید state رو توی constructor گذاشت
حالت فاکنشنال رو توضیح میدید بیزحمت؟
سلام
این موارد تو دوره کار با Hooks در React Native آموزش داده شده و میتونید به صورت رایگان مشاهده کنید
اون دوره رو دیدم
توی realm این ارور رو میده
[Error: Test.name must be of type ‘string’, got ‘object’ ([object Object])]
اینجا داره میگه که باید نوع Test.name
string باشه ولی object داده شده
ربطی به نحوه تعریف state نداره
عملا نمیشه از ماژولهاش استفاده کرد وقتی نصب می کنی موقع ران گرفتن به کتابخونه ای که خودش تو فایل settings.gradle ایجاد کرده خطا میده ): دلخوش بودم از دست اندروید استودیو راحت میشیم ولی صد رحمت به استودیو
سلام.چه خطایی میده؟؟
با سلام و عرض خسته نباشید خدمت شما بابت آموزش های خوبتون بنده این قطعه کد رو که اجرا میکنم ارور زیر برام میاد :
Error:Error:Migration is required due to the following errors :
-property ‘Users.nickname’ has been added
این خطا واسه اینه که شما schema رو تغییر دادید. توی مستندات realm به صورت واضح گفته که وقتی schema رو تغییر می دید، باید چه کنید. اینجا رو بخونید.
https://realm.io/docs/javascript/latest#migrations
با عرض سلام و خسته نباشید خدمت شما من موقع نصب پکیج Relam به خطای زیر برخورد می کنم از فیلتر شکنم استفاده می کنم
npm WARN eslint-plugin-react-native@3.2.1 requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Error: EPERM: operation not permitted, rename ‘C:\Users\HamidReza\Desktop\test\node_modules\.staging\fsevents-1d059d22\node_modules\concat-map’ -> ‘C:\Users\HamidReza\Desktop\test\node_modules\.staging\concat-map-10d4c5c2’
npm ERR! path C:\Users\HamidReza\Desktop\test\node_modules\bl
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename ‘C:\Users\HamidReza\Desktop\test\node_modules\bl’ -> ‘C:\Users\HamidReza\Desktop\test\node_modules\.bl.DELETE’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\HamidReza\AppData\Roaming\npm-cache\_logs\2018-06-18T09_05_08_392Z-debug.log
سلام.
همونطور که در error به شما اعلام کرده،شما به eslint نیاز دارید که با دستور زیر میتونید نصبش کنید
npm install eslint –save-dev
البته باید Node.js (>=4.x), npm version 2 باشه