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上自己好好研究!
后续文章持续更新,敬请期待!
文章为作者原创,转载请注明出处。