风格"currentLocationLabel";来自react原生谷歌位置自动完成

Question

我使用的是react native google places autocomplete，我想设置currentlocation标签的样式，使其成为标记图标+文本，我还想让它在屏幕上显示一次，直到点击文本输入。我的代码如下：

export default class VilleC extends React.Component {
render() {
loc = () => {
return(
<View style={{flexDirection:'row',marginLeft:10}}>
<EntypoI color={'grey'} size={20} name={'direction'} />
<Text style={{color:'black',marginLeft:10}}>Autour de moi</Text>
</View>);
}
return (
<View style={{flex:1}}>
<GooglePlacesAutocomplete
placeholder='Où ? (adresse,ville...)'
query={{
key: GOOGLE_PLACES_API_KEY,
language: 'fr', // language of the results
components: 'country:ma',
}}
fetchDetails = {true}
currentLocation={true}
>>>>>>>>>><   currentLocationLabel={// what's in function loc i would like to make it here } 
GooglePlacesDetailsQuery    = {{
fields: ['geometry']
}}
onPress={(data, details = null) => {console.log(details.geometry.location.lat);
console.log(data.description);
NavigationService.navigate('Résultat',{screen:'Résultats',params:{lien: this.props.route.params.lien, choice: this.props.route.params.choix,lat:details.geometry.location.lat,lng:details.geometry.location.lng,loc:data.description}})
}}
onFail={(error) => console.error(error)}
requestUrl={{
url:
'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
useOnPlatform: 'web',
}} // this in only required for use on the web. See https://git.io/JflFv more for details. // variable styles can t find error
enablePoweredByContainer={false}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth: 0,
},
textInput: {
borderRadius:0,
marginLeft: 3,
marginRight: 3,
height: 38,
color: '#5d5d5d',
fontSize: 16,
paddingLeft:20,
shadowColor: "grey",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0,
},
elevation: 3,
},

predefinedPlacesDescription: {
color: '#1faadb',
},
}}
/>
</View>
);
}
}

我真的很感谢你的帮助！

Answer 1

您可以使用renderRow道具将图标添加到当前位置，也可以使用autFocus道具自动打开输入。

类似这样的东西：

export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<GooglePlacesAutocomplete
placeholder="Où ? (adresse,ville...)"
query={{
key: 'GOOGLE_PLACES_API_KEY',
language: 'fr', // language of the results
components: 'country:ma',
}}
autoFocus={true}
fetchDetails={true}
currentLocation={true}
currentLocationLabel="Autour de moi"
renderRow={(row) =>
row.isCurrentLocation ? (
<View style={{ flexDirection: 'row', marginLeft: 10 }}>
<Text>icon</Text>
<Text style={{ color: 'black', marginLeft: 10 }}>
{row.description}
</Text>
</View>
) : (
<Text>{row.description}</Text>
)
}
GooglePlacesDetailsQuery={{
fields: ['geometry'],
}}
onPress={(data, details = null) => {
console.log(details.geometry.location.lat);
console.log(data.description);
}}
onFail={(error) => console.error(error)}
requestUrl={{
url:
'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
useOnPlatform: 'web',
}} // this in only required for use on the web. See https://git.io/JflFv more for details. // variable styles can t find error
enablePoweredByContainer={false}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth: 0,
},
textInput: {
borderRadius: 0,
marginLeft: 3,
marginRight: 3,
height: 38,
color: '#5d5d5d',
fontSize: 16,
paddingLeft: 20,
shadowColor: 'grey',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0,
},
elevation: 3,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
}}
/>
</View>
);
}
}