地点列表内容上的 GooglePlacesAutocomplete 样式不起作用，无法包装地点反应原生

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/customized-google-places-autocomplete-component-for-ios-and-android-react-native-apps/ 但无法找到解决方案。帮助将不胜感激

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%",
},

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