来自 react-native-google-places-autocomplete 的样式“currentLocationLabel”

Question

我正在使用 react-native-google-places-autocomplete，我想设置当前位置标签的样式以使其成为标记图标 + 文本，并且我还想让它在屏幕上可见一次，直到点击文本输入。 我的代码如下所示：

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