REACT天然从SQLite动态更改ListView

我想在获得结果表单数据库后重新渲染列表视图。我尝试了Google几乎所有可能的方法，但它无法正常工作。来自数据库的记录正确获取，但列表视图没有更新。请在下面找到我的代码。我想从数据库实时搜索数据＆amp;在ListView

中显示它们

import React, { Component } from 'react';
import { StatusBar, ListView, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { Container, Header, Title, Content, H3,Item,Input, ListItem, Button, Icon, Footer, FooterTab, Left, Right, Body } from 'native-base';
import { openDrawer } from '../../actions/drawer';
import styles from './styles';
class Dictionary extends Component {
  static propTypes = {
    openDrawer: React.PropTypes.func,
  }
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2});
    this.state = {
        dataSource: ds.cloneWithRows([]),
        isLoading: false,
    }
  }
  searchMatchingWords(keyWord) {
    if(keyWord.length > 0) {
      var temp = [];
      db.executeSql("SELECT `English` FROM `dictionary`  WHERE `English` LIKE '"+keyWord+"%' ORDER BY  `English` ASC LIMIT 0, 30", [], function(results) {
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
              temp.push(results.rows.item(i));
            }
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(temp),
            });
      });
    }
  }
  render() {
    return (
      <Container style={styles.container}>
        <Header>
          <Left>
            <Button transparent onPress={this.props.openDrawer}>
              <Icon name="ios-menu" />
            </Button>
          </Left>
          <Body>
            <Title>Search Words</Title>
          </Body>
          <Right />
        </Header>
        <Header searchBar rounded>
          <Item>
            <Icon active name="search" />
            <Input placeholder="Search" onChangeText={(text) => this.searchMatchingWords(text)}/>
            <Icon active name="bookmark" />
          </Item>
          <Button transparent>
            <Text>Search</Text>
          </Button>
        </Header>
        <Content>
            <View style={{flex: 1, paddingTop: 22}}>
              <ListView
                enableEmptySections={true}
                dataSource={this.state.dataSource}
                renderRow={(rowData) =>
                  <ListItem>
                    <Text>{rowData.English}</Text>
                    <Right><Icon name="arrow-forward" /></Right>
                  </ListItem>
                }/>
            </View>
        </Content>
      </Container>
    );
  }
}
function bindAction(dispatch) {
  return {
    openDrawer: () => dispatch(openDrawer()),
  };
}
const mapStateToProps = state => ({
  navigation: state.cardNavigation,
  themeState: state.drawer.themeState,
});
export default connect(mapStateToProps, bindAction)(Dictionary);

我解决了我的问题。React Native Setstate没有问题。问题是

这个

操作员。

if(keyWord.length > 0) {
      var temp = [];
      var self = this;
      db.executeSql("SELECT `English` FROM `dictionary`  WHERE `English` LIKE '"+keyWord+"%' ORDER BY  `English` ASC LIMIT 0, 30", [], function(results) {
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
              temp.push(results.rows.item(i));
            }
            self.setState({
                dataSource: self.state.dataSource.cloneWithRows(temp),
            });
      });
    }

相关内容

最新更新

热门标签：