带你从零学ReactNative开发跨平台App开发（十一）
ReactNative跨平台开发系列教程：
贴一个交流群的二维码，欢迎加入：
贴一个交流群二维码，欢迎加入
上篇说要来点真干货，由于接口没有整理好，我打算整理好接口直接部署到服务器上，这样大家可以一起使用，很遗憾，还没有整理好，不过，今天依然来点干货，只不过不是太干！
废话不多说，开始撸码，你准备好了吗？
这篇主要利用expo上集成的sqllite数据，以及一些缓存操作，做一个简单类型的备忘录！
主要用到依赖有
"expo": "^23.0.4",
"pubsub-js": "^1.5.7",
"react": "16.0.0",
"react-native": "0.50.3",
"react-navigation": "^1.0.0-beta.22"该项目源代码，全部推到github，点击这里获取！
这个demo虽然小，但是灵活的控制了数据流。希望大家可以有所收获。
犹豫本项目用到了SqlLite，在此我想喷一些那些搞移动端之想着掉接口的屌丝们！
下面简单介绍一些代码：（能把 这写代码看透彻的人，我给你点赞！）
//import liraries
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
ListView,
} from 'react-native';
import PubSub from 'pubsub-js';
import MainItem from './MainItem';
import TodoManager from '../DataServer/TodoManager';
import AddTodo from './AddTodo';
import Footer from '../Component/Footer';
// create a component
class MainView extends Component {
static navigationOptions = {
title: '备忘录',
headerStyle: ({
backgroundColor: "#0EABE8",
elevation: 0,
}),
headerTitleStyle: ({
alignSelf: 'center'
}),
headerLeft: (
<TouchableOpacity onPress={() => {
PubSub.publish('all');
}}>
<Text>全选</Text>
</TouchableOpacity>
),
headerRight: (
<TouchableOpacity onPress={() => {
PubSub.publish('add');
}}>
<Text>添加</Text>
</TouchableOpacity>
)
}
componentDidMount() {
PubSub.subscribe('all', () => {
TodoManager.selectAll();
});
PubSub.subscribe('add', () => {
this.props.navigation.navigate('AddTodo');
});
TodoManager.setListener((todo) => {
this.setState({
ds: this.state.ds.cloneWithRows(todo),
});
});
TodoManager.setFinishListener((total) => {
this.setState({
selectCount: total,
});
});
TodoManager.getTodoInfo(); }
constructor(props) {
super(props);
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
ds: ds.cloneWithRows([]),
isSelect: false,
selectCount: 0,
}
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.ds}
renderRow={(rowData) => {
console.log('===========rowData=========================');
console.log(rowData);
console.log('====================================');
return (
<View>
<MainItem
{...rowData}
clickSelect={(id) => {
console.log('====================================');
console.log('点击了id' + id);
console.log('====================================');
TodoManager.singleSelect(id);
}} />
<Text>{rowData.finish}</Text>
</View> );
}}
enableEmptySections={true}
/> <Footer selectCount={this.state.selectCount} />
</View>
);
}
} // define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
}); //make this component available to the app
export default MainView;关于操作SqlLite的Manager
import { SQLite } from 'expo';
class TodoManager {
constructor() {
this.db = SQLite.openDatabase('todoDB4');
this.db.transaction((tx) => {
const sql = "create table 'main'.'todo' ('id' integer not null primary key autoincrement,'name' text,'content' text,'finish' integer)";
tx.executeSql(sql, null, (tx, result) => {
console.log('====================================');
console.log('创建表成功');
console.log('====================================');
}, (tx, error) => {
console.log('====================================');
console.log('创建表失败' + error);
console.log('====================================');
});
});
} setListener(listener) {
this.listener = listener;
} setFinishListener(listener) {
this.finishListener = listener;
} getTodoInfo(callBack) {
console.log('====================================');
console.log('bbbbb');
console.log('====================================');
this.db.transaction((tx) => {
const sql = 'select * from todo';
tx.executeSql(sql, null, (tx, result) => {
const todos = result.rows._array;
console.log('=============todostodos=======================');
console.log(todos);
console.log('===================================='); //监听选中与否的变量变化
let selectCount = 0;
todos.map((value) => {
if (value.finish == 1) {
selectCount++;
}
});
//巧妙思路的变化
if (callBack) {
callBack(todos);
}
if (this.listener) {
console.log('====================================');
console.log('this.listener');
console.log('====================================');
this.listener(todos);
}
//回传过去
this.finishListener(selectCount);
}, (tx, error) => {
console.log('====================================');
console.log('查询失败' + error);
console.log('====================================');
//巧妙思路的变化
if (callBack) {
callBack([]);
}
if (this.listener) {
this.listener([]);
}
});
});
} addTodoInfo(info, callBack) {
this.db.transaction((tx) => {
const sql = `insert into todo(name,content,finish) values('${info.name}','${info.content}',0)`;
tx.executeSql(sql, null, (tx, result) => {
console.log('====================================');
console.log('添加成功');
console.log('====================================');
this.getTodoInfo();
if (callBack) {
callBack(true);
} }, (tx, error) => {
console.log('====================================');
console.log('添加失败' + error);
console.log('====================================');
if (callBack) {
callBack(false);
}
});
});
} delTodoInfo() {
// this.db.transaction((tx) => {
// const ids = info.id.join(',');
// const sql = `delete from todo where id in (${ids})`;
// tx.executeSql(sql, null, (tx, result) => {
// console.log('====================================');
// console.log('删除成功');
// console.log('====================================');
// if (callBack) {
// callBack(true);
// }
// this.getTodoInfo();
// }, (tx, error) => {
// console.log('====================================');
// console.log('删除失败' + error);
// console.log('====================================');
// if (callBack) {
// callBack(false);
// }
// }); // });
this.db.transaction((tx) => {
const sql = 'delete from todo where finish = 1';
tx.executeSql(sql, null, (tx, resultSet) => {
console.log('删除成功');
this.getTodoInfo();
})
})
} //全选
selectAll() {
this.db.transaction((tx) => {
const sql = 'select * from todo';
tx.executeSql(sql, null, (tx, result) => {
const array = result.rows._array;
let length = array.length;
let slength = 0;
array.map((value, key) => {
if (value.finish == 1) {
slength++;
}
});
if (slength == length) {
//取消全选
const sql = 'update todo set finish=0';
tx.executeSql(sql, null, (tx, resultSet) => {
if (resultSet) {
this.getTodoInfo();
}
}, (tx, error) => {
console.log('====================================');
console.log('取消全选失败' + error);
console.log('====================================');
}); } else {
//全选
const sql = 'update todo set finish=1';
tx.executeSql(sql, null, (tx, resultSet) => {
if (resultSet) {
this.getTodoInfo();
}
}, (tx, error) => {
console.log('====================================');
console.log('全选失败' + error);
console.log('====================================');
});
} }, (tx, error) => {
console.log('====================================');
console.log('全选失败' + error);
console.log('====================================');
});
});
} //单选
singleSelect(id) {
//先根据传过来的id查询一下
this.db.transaction((tx) => {
const sql = `select * from todo where id=${id}`;
tx.executeSql(sql, null, (tx, resultSet) => {
//修改其状态
const todo = resultSet.rows._array[0];
const finish = todo.finish ? 0 : 1;//修改
const sql = `update todo set finish=${finish} where id=${id}`;
tx.executeSql(sql, null, (tx, resultSet) => {
console.log('==============aaaa======================');
console.log('aaaa');
console.log('====================================');
this.getTodoInfo();
})
}, (tx, error) => {
console.log('====================================');
console.log('单选失败' + error);
console.log('====================================');
});
}); } }
export default new TodoManager();细节就不详细介绍了，代码github上自己好好研究！
后续文章持续更新，敬请期待！
文章为作者原创，转载请注明出处。
带你从零学ReactNative开发跨平台App开发（十一）的更多相关文章
- 带你从零学ReactNative开发跨平台App开发（二）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发（一）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发-[react native 仿boss直聘]（十三）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发（十）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发（九）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发[expo 打包发布]（八）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发（七）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发（六）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- 带你从零学ReactNative开发跨平台App开发（五）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
随机推荐
- web.xml详细配置
1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...
- Java—关于String的分析
一.两种赋值方式的比较 1.直接赋值法:String s1="abc"; 这种赋值方法用的最多,因为它可能不需要创建对象,或者只创建一次. 它首先会判断字符串常量池有没有存在字符串 ...
- 安卓的SlidingMenu配置
最近用到了界面的优化,使用SlidingMenu开源库比较方便,为了方便学习,我整理了一下配置过程. 1.准备资料. 首先下载这两个ActionBarSherlock和SlidingMenu,如图:
- Pl/SQl 安装和配置Oracle 数据库连接
在进行企业开发时,数据库(oracle)一般在我们本地安装的:另外,oracle数据库比较大,在本地安装,会拖慢电脑的速度.我们可以通过oracle客户端,远程连接数据库.下面介绍自己的安装方式 1. ...
- Sklearn-RandomForest
在scikit-learn中,RandomForest的分类类是RandomForestClassifier,回归类是RandomForestRegressor,需要调参的参数包括两部分,第一部分是B ...
- C++中模板与泛型编程
目录 定义一个通用模板 模板特化和偏特化 模板实例化与匹配 可变参数模板 泛型编程是指独立与任何类型的方式编写代码.泛型编程和面向对象编程,都依赖与某种形式的多态.面向对象编程的多态性在运行时应用于存 ...
- SVN 基本的工作循环
基本的工作循环 Subversion有许多特性.选项和华而不实的高级功能,但日常的工作中你只使用其中的一小部分,在这一节里,我们会介绍许多你在日常工作中常用的命令. 典型的工作周期是这样的: 更新你的 ...
- OOAD之创建型模式之工厂模式
首先我们为什么要学习设计模式呢? 1)模式从经验中总结出来的,经过证实的方案,模式只有在实际系统中经过多次验证之后才能成为模式. 2) 提高系统的可维护性, 通过使用设计模式,在系统面临升级和维护时, ...
- textarea的placeholder属性内容折行显示(PC和移动端端)
1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示 2.移动端折行方法 webkit内核 textarea::-webkit-input-placeh ...
- vue-router参数传递
1.在vue-router中,有两大对象被挂载到了实例this2.$route(只读.具备信息的对象).$router(具备函数功能)3.查询字符串方式传递参数 1).去哪里 <router-l ...