当我首先在模拟器上运行应用程序时,它会显示结果,但是当我第二次在texbox中键入时,它不会显示搜索结果
依赖关系:添加纱线react-native-google-autocomplete
这是我的app.js代码
import React from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
ScrollView,
ActivityIndicator,
Button
} from 'react-native';
import { GoogleAutoComplete } from 'react-native-google-autocomplete';
import LocationItem from './src/components/LocationItem';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<GoogleAutoComplete apiKey={'BKzlhoIMUfyp8yuOAIKxqZxGFluOs-3j8KFhu0'} debounce={500} minLength={3}>
{({
handleTextChange,
locationResults,
fetchDetails,
isSearching,
inputValue,
clearSearchs
}) => (
<React.Fragment>
<View style={styles.inputWrapper}>
<TextInput
style={styles.textInput}
placeholder="Search a places"
onChangeText={handleTextChange}
value={inputValue}
/>
<Button title="Clear" onPress={clearSearchs} />
</View>
{isSearching && <ActivityIndicator size="large" color="red" />}
<ScrollView>
{locationResults.map(el => (
<LocationItem
{...el}
key={el.id}
fetchDetails={fetchDetails}
/>
))}
</ScrollView>
</React.Fragment>
)}
</GoogleAutoComplete>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
textInput: {
height: 40,
width: 300,
borderWidth: 1,
paddingHorizontal: 16,
},
inputWrapper: {
marginTop: 80,
flexDirection: 'row'
},
});
这是我的locationitem.js文件
import React, { PureComponent } from 'react';
import { View, Alert, Text, StyleSheet, TouchableOpacity } from 'react-native';
class LocationItem extends PureComponent {
_handlePress = async () => {
const res = await this.props.fetchDetails(this.props.place_id)
console.log('result', res)
}
render() {
return (
<TouchableOpacity style={styles.root} onPress={this._handlePress}>
<Text>{this.props.description}</Text>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
root: {
height: 40,
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: 'center'
}
})
export default LocationItem;
可以帮我吗!