地点列表内容上的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%',
  },

})；

请参阅此链接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%",
},

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