Question

我对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.',
                },
            });
        }

Answer 1

尝试一下：

db.transaction(tx => {
   tx.executeSql('SELECT * FROM tblWord',
      [], (_, { rows: { _array } }) => {console.log(_array)})
})

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

1 个答案: