无法通过React-Native中的RecyclerListView显示SQLite表

问题描述 投票:0回答:1

我是React原生的新手,我正在尝试创建一个字典应用程序,为此,想从本地SQLite中获取一些数据并将其放到RecyclerListView,但我无法得到任何结果,只是空白屏幕。我究竟做错了什么??这是我的代码:

import React, {Component} from 'react';
import {StyleSheet , View, Dimensions , Text , Image} from 'react-native';
import { RecyclerListView, DataProvider , LayoutProvider } from 'recyclerlistview';

const SCREEN_WIDTH = Dimensions.get('window').width;
var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({name: 'tes.sqlite', createFromLocation: '~dictionary.sqlite'})

export default class App extends Component {
    constructor(props){
        super(props);

        const record = [];

        db.transaction((tx) => {
          tx.executeSql('SELECT * FROM tblWord', [], (tx, results) => {
            // var len=results.rows.length;
            for (let i = 0; i < 10 ; i++) {
              let row = results.rows.item(i);
              record.push({
                type: 'NORMAL',
                item:{
                    id:row.id,
                    name: row.word_english,
                    description: row.word_persian,}
                });
                console.log('row.word_english =  ' + row.word_english ) //this shows the right output in console
              }              

            });
          });



        this.state = {
            list: new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(record),
        };
        this.layoutProvider = new LayoutProvider((i) => {
            return this.state.list.getDataForIndex(i).type;
        }, (type ,dim) => {
            switch (type) {
                case 'NORMAL' : 
                    dim.width = SCREEN_WIDTH;
                    dim.height=100;
                    break;
                default:
                    dim.width = 0;
                    dim.height = 0;
                    break;
            }
        })
    }
rowRenderer = (type , data) => {
    const {name , description } = data.item;
    return (
        <View>
            <Text style={{fontSize:20 , color : 'blue'}}>name: {name}</Text>
            <Text>desc: {description}</Text>
        </View>
    )
}
    render() {
        return(
            <View style={styles.container}>
                <RecyclerListView
                    style = {{flex:1}}
                    rowRenderer={this.rowRenderer}
                    dataProvider={this.state.list}
                    layoutProvider={this.layoutProvider}
                />
            </View>

        );


    }

}

const styles = StyleSheet.create({
    container:{
        flex:1,
    },
})

PS:如果我用下面的代码替换事务函数,它可以完美地工作:

for (i=0; i<10 ; i+=1) {
            record.push({
                type: 'NORMAL',
                item:{
                    id:1,
                    name: 'name1',
                    description: 'this is for testing.',
                },
            });
        }
sqlite react-native
1个回答
0
投票

试试这个:

db.transaction(tx => {
   tx.executeSql('SELECT * FROM tblWord',
      [], (_, { rows: { _array } }) => {console.log(_array)})
})
© www.soinside.com 2019 - 2024. All rights reserved.