时间戳

首页 > 解决方案 > GooglePlacesAutocomplete 对地点列表内容的样式不起作用，无法包装地点 react-native

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

问题描述

我正在使用 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/ 但无法找到解决方案。帮助将不胜感激

标签： react-nativegoogleplacesautocomplete

解决方案

显示结果的 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%",
},

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

推荐阅读