我第一次使用ReactNative。我正在尝试基于api返回的内容构建ListView
。这是我的组成部分:
'use strict';
var React = require('react-native');
var api = require('../utils/api');
var {
ActivityIndicatorIOS,
ListView,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View
} = React;
class CheckIn extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
search(searchTerm) {
api.search(searchTerm)
.then((response) => {
this.setState({
isLoading: false,
dataSource: this.state.dataSource.cloneWithRows(response)
})
});
}
renderCustomRow(row) {
return (
<TouchableHighlight style={styles.row}>
<View style={styles.container}>
<Text>{row.name}</Text>
</View>
</TouchableHighlight>
);
}
render() {
return (
<View style={{marginTop: 65}}>
<TextInput
style={styles.search}
placeholder="Search"
onChangeText={(text) => {
this.search(text);
this.setState({isLoading: true});
}}/>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderCustomRow.bind(this)}
style={styles.listView} />
<ActivityIndicatorIOS
animating={this.state.isLoading}
color='#111'
size="large"></ActivityIndicatorIOS>
</View>
)
}
}
var styles = StyleSheet.create({
search: {
height: 40,
padding: 5,
borderBottomWidth: 2,
borderBottomColor: '#000'
}
});
module.exports = CheckIn;
当我在搜索栏中输入一个字母时,会显示活动指示符,api会返回一个有效的JSON响应(使用console.log检查),然后活动指示符应该消失,但事实并非如此。如果我输入第二个字母,我会收到以下错误:
Cannot read property '_currentElement' of null
我似乎缺少什么?
我正在使用ReactNative 0.14,npm是版本3.5