反應原生動態改變ListView從SQLite

我想在獲得結果表單數據庫後重新呈現列表視圖。我嘗試了幾乎所有從谷歌的可能方式，但它不工作。來自數據庫的記錄正確提取，但列表視圖未更新。請在下面找到我的代碼。我想從數據庫& Live Search的數據顯示他們的ListView反應原生動態改變ListView從SQLite

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);

來源

2017-03-04 Sumeet Roy

變種溫度後添加此= []; temp = this.state.ds.slice（），chekc它n讓我知道 –

它不工作@NiteshMishra –

我解決我的問題。反應原生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), 
 
      }); 
 
     }); 
 
    }

來源

2017-03-11 12:05:33

反應原生動態改變ListView從SQLite

回答

相關問題