地方列表内容上的 GooglePlacesAutocomplete 样式不起作用，无法包装地方 react-native

Question

我正在使用 GooglePlacesAutocomplete，在其中键入时获取地点列表，但有些地方文本包含的内容不止于此，所以我想将文本换行。

 <GooglePlacesAutocomplete
            placeholder='Where To ?'
            minLength={4}
            autoFocus={true}
            listViewDisplayed="auto"
            returnKeyType={'search'}
            fetchDetails={true}
            onPress={(data, details = null) => {
                props.notifyChange(details.geometry.location,data);
            }}
            query={{
                key: 'chghgdhgfhgfjhdhklkl',
                language: 'en',
            }}
            nearbyPlacesAPI= 'GooglePlacesSearch'
            debounce={200}
            styles={ styles }>
        </GooglePlacesAutocomplete>

我的风格如下

  const styles = StyleSheet.create({
textInputContainer:{
    backgroundColor: 'rgba(0,0,0,0)',
    borderTopWidth: 0,
    borderBottomWidth:0,
    zIndex:999,
    width:'90%',
},
textInput: {
    marginLeft: 0,
    marginRight: 0,
    height: 45,
    color: '#5d5d5d',
    fontSize: 16,
    borderWidth:1,
    zIndex:999,
  },
  predefinedPlacesDescription: {
    color: '#1faadb'
  },
  listView:{
      top:45.5,
      zIndex:10,
      position: 'absolute',
      color: 'black',
      backgroundColor:"white",
      width:'89%',
  },
  separator:{
    flex: 1,
    height: StyleSheet.hairlineWidth,
    backgroundColor: 'blue',
  },
  description:{
    flexDirection:"row",
    flexWrap:"wrap",
    fontSize:14,
    maxWidth:'89%',
  },

});

参考这个 link https://reactnativeexample.com/customizable-google-places-autocomplete-component-for-ios-and-android-react-native-apps/ 但找不到 solution.help 将不胜感激

Answer 1

显示结果的 ListView 的宽度已硬编码为 window.with。这就是为什么你换行文本不起作用的原因。

有一个潜在的解决方法，那就是将描述分成多行。您可以使用 renderRow 道具来做到这一点。需要根据您的特定用例调整样式。

<GooglePlacesAutocomplete
            placeholder='Where To ?'
            minLength={4}
            autoFocus={true}
            listViewDisplayed="auto"
            returnKeyType={'search'}
            fetchDetails={true}
            onPress={(data, details = null) => {
                props.notifyChange(details.geometry.location,data);
            }}
            query={{
                key: 'chghgdhgfhgfjhdhklkl',
                language: 'en',
            }}
            nearbyPlacesAPI= 'GooglePlacesSearch'
            debounce={200}
            renderRow={(rowData) => {
            const title = rowData.structured_formatting.main_text;
            const address = rowData.structured_formatting.secondary_text;
            return (
             <View>
              <Text style={{ fontSize: 14 }}>{title}</Text>
              <Text style={{ fontSize: 14 }}>{address}</Text>
             </View>
             );
            }}
            styles={ styles }>
        </GooglePlacesAutocomplete>

您需要将 row 添加到您的样式中，您可以从样式中 description，因为它正在被 renderRow

覆盖

row: {
 height: "100%",
},

披露：我是这个包的维护者。

Answer 2

您甚至无法为字段设置样式。

关注官方文档-

<GooglePlacesAutocomplete
  placeholder='Enter Location'
  minLength={2}
  autoFocus={false}
  returnKeyType={'default'}
  fetchDetails={true}
  styles={{
    textInputContainer: {
      backgroundColor: 'grey',
    },
    textInput: {
      height: 38,
      color: '#5d5d5d',
      fontSize: 16,
    },
    predefinedPlacesDescription: {
      color: '#1faadb',
    },
  }}
/>

地方列表内容上的 GooglePlacesAutocomplete 样式不起作用，无法包装地方 react-native

GooglePlacesAutocomplete styling on the list content of places is not working,not able to do wrapping the places react-native

react-native

googleplacesautocomplete