2024年前端最新ReactNative进阶（十一）：realm 数据库_react native realm(1)，面试题附答案

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

    name: 'string',
}

};

const CitySchema = {
name: CityTableName,
primaryKey: ‘city_id’,
properties: {
city_id: ‘int’,
city_name: ‘string’,
}
};

const instance = new Realm({
schema: [
HistorySchema,
CitySchema,
],
deleteRealmIfMigrationNeeded: true,
inMemory: false,
});

/**表使用区**/
export function writeToRealm(obj,tabName) {
return new Promise((resolve, reject) => {
instance.write(() => {
instance.create(tabName, obj, true)
resolve(true)
})
})
}

export function queryAllFromRealm(tabName) {
return new Promise((resolve, reject) => {
let obj = instance.objects(tabName);
let objStr = JSON.stringify(obj);
resolve(JSON.parse(objStr))
})
}

export function clearAllFromRealm(tabName) {
return new Promise((resolve, reject) => {
instance.write(() => {
let arrays = instance.objects(tabName);
instance.delete(arrays);
resolve(true)
})
})
}

export function clearRowFromRealm(id,tabName) {
return new Promise((resolve, reject) => {
instance.write(() => {
let arrays = instance.objects(tabName);
let row = arrays.filtered(‘id==’ + id);
instance.delete(row);
resolve(true)
})
})
}

2）调用文件

import React, {Component} from “react”;
import {StyleSheet, Text, ToastAndroid, TouchableHighlight, View,} from ‘react-native’;
import {
HistoryTableName,
CityTableName,
clearAllFromRealm,
queryAllFromRealm,
writeToRealm,
clearRowFromRealm
} from “./RealmUtil”;

export default class TestRealm extends Component {
componentWillMount() {
}

//表1操作
\_addData() {
    clearAllFromRealm(HistoryTableName);

    let row1 = {"id": 1, "name": "战狼1"};
    writeToRealm(row1, HistoryTableName).then(() => {
        ToastAndroid.show('写入完成1', ToastAndroid.SHORT);
    });
    let row2 = {"id": 2, "name": "战狼2"};
    writeToRealm(row2, HistoryTableName).then(() => {
        ToastAndroid.show('写入完成2', ToastAndroid.SHORT);
    });
}

\_readAllData() {
    queryAllFromRealm(HistoryTableName).then((list) => {
        for (let key in list) {
            ToastAndroid.show('id:' + list[key].id + ',name:' + list[key].name, ToastAndroid.SHORT);
        }
    });
}

\_updateData() {
    let row2 = {"id": 2, "name": "北京222"};
    writeToRealm(row2, HistoryTableName).then(() => {
        ToastAndroid.show('修改完成', ToastAndroid.SHORT);
    });
}

\_delRowData() {
    //删除第一行
    clearRowFromRealm(1, HistoryTableName).then(() => {
        ToastAndroid.show('删除完成', ToastAndroid.SHORT);
    });
}

//表2操作
\_addData2() {
    clearAllFromRealm(CityTableName);

    let row1 = {"city\_id": 1, "city\_name": "上海"};
    writeToRealm(row1, CityTableName).then(() => {
        ToastAndroid.show('2写入完成1', ToastAndroid.SHORT);
    });
    let row2 = {"city\_id": 2, "city\_name": "北京"};
    writeToRealm(row2, CityTableName).then(() => {
        ToastAndroid.show('2写入完成2', ToastAndroid.SHORT);
    });
}

\_readAllData2() {
    queryAllFromRealm(CityTableName).then((list) => {
        for (let key in list) {
            ToastAndroid.show('城市ID:' + list[key].city_id + ',城市名:' + list[key].city_name, ToastAndroid.SHORT);
        }
    });
}

render() {
    return (
        <View style={{flex: 1}}>
            <View style={{padding: 10}}><Text>表1操作</Text></View>
            <TouchableHighlight onPress={() => this.\_delRowData()} style={styles.button} underlayColor="#a5a5a5">
                <Text>删除第一行</Text>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => this.\_addData()} style={styles.button} underlayColor="#a5a5a5">
                <Text>增加数据</Text>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => this.\_updateData()} style={styles.button} underlayColor="#a5a5a5">
                <Text>修改数据</Text>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => this.\_readAllData()} style={styles.button} underlayColor="#a5a5a5">
                <Text>读取全部数据</Text>
            </TouchableHighlight>

            <View style={{padding: 10, marginTop: 10}}><Text>表2操作</Text></View>
            <TouchableHighlight onPress={() => this.\_addData2()} style={styles.button} underlayColor="#a5a5a5">
                <Text>增加数据</Text>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => this.\_readAllData2()} style={styles.button} underlayColor="#a5a5a5">
                <Text>读取全部数据</Text>
            </TouchableHighlight>
        </View>
    );

}

}

const styles = StyleSheet.create({
button: {
margin: 3,
backgroundColor: ‘white’,
padding: 10,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: ‘#cdcdcd’
},
});

### 四、如何查看数据文件


工具：**Genymotion模拟器**


思路：使用 `adb` 命令 ，先复制到本地，然后用 `Realm Studio` 打开 `realm` 文件即可！


步骤如下:


1）先连接远程



#### Vue 编码基础

2.1.1. 组件规范  

2.1.2. 模板中使用简单的表达式  

2.1.3 指令都使用缩写形式  

2.1.4 标签顺序保持一致  

2.1.5 必须为 v-for 设置键值 key  

2.1.6 v-show 与 v-if 选择  

2.1.7 script 标签内部结构顺序  

2.1.8 Vue Router 规范



#### Vue 项目目录规范

2.2.1 基础  

2.2.2 使用 Vue-cli 脚手架  

2.2.3 目录说明  

2.2.4注释说明  

2.2.5 其他

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/b4ee1921321dddc29bf532ba888c89e9.png)