React Native-Google自动完成API

Question

我的问题是描述的Text彼此重叠。我不知道这是一个错误，我只是无法解决它。我尝试过任何有关样式的尝试，但没有任何效果。我需要其他角度的帮助。感谢您抽出宝贵的时间阅读此内容。

重叠文本的图像：

我还收到有关唯一key道具的警告，只是添加了此问题，因为它可能与我的问题有关。

警告key道具的图片：

这是我的代码：

async onChangeDestination(destination) {
this.setState({ destination });
const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${apiKey}
  &input=${destination}&location=${this.state.focusedLocation.latitude}, 
  ${this.state.focusedLocation.longitude
}&radius=2000`;
try {
  const result = await fetch(apiUrl);
  const json = await result.json();
  console.log(json);
  this.setState({
    predictions: json.predictions
  });
} catch (err) {
  console.log(err)
}
}

render() {
//For Prediction
const predictions = this.state.predictions.map(prediction => (
  <View style={styles.descriptionContainer}>
    <Text key={prediction.id} style={styles.descriptionText}>{prediction.description}</Text>
  </View>
));
//For Marker
let marker = null;
if(this.state.locationChosen) {
  marker = <MapView.Marker coordinate={this.state.markerPosition}/>
}
return(
  <View style={styles.container}>
    {/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
    <MapView
      style={styles.map}
      initialRegion={this.state.focusedLocation}
      onPress={this.pickLocationHandler}
      showsUserLocation={true}
      ref={ref => this.map = ref} //For animating map movement
    >
      {marker}
    </MapView>
    {/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
      <Icon name="md-locate" size={30} color="blue"/>
    </TouchableOpacity> */}
    <TextInput 
      placeholder="Search for an event or place!"
      style={styles.destinationInput}
      onChangeText={destination => {
        this.setState({destination});
        this.onChangeDestinationDebounced(destination)
      }}
      value={this.state.destination}
    />
    {predictions}
  </View>
);
} 

const styles = StyleSheet.create({
container: {
  zIndex: -1,
  alignItems: 'center',
},
map: {
  height: '100%',
  width: '100%'
},
iconContainer: {
  position: 'absolute',
  top: 60,
  right: 15,
  zIndex: 1
},
destinationInput: {
  position: 'absolute',
  zIndex: 10,
  width: '97%',
  top: 15,
  backgroundColor: 'white',
  borderRadius: 8,
  padding: 8
},
descriptionText: {
  color: 'black',
  position: 'absolute',
  zIndex: 10,
  top: 60,
},
descriptionContainer: {
  zIndex: 2,
  position: 'absolute',
  top: 20,
  height: Dimensions.get('window').height,
  width: Dimensions.get('window').width,
  justifyContent: 'space-between'
}
})

Answer 1

因此我无法运行代码，但是您的function more_information() { global $product; if ($product){ $url = esc_url($product->get_permalink() ); echo '<div class="bottone-cat"><a rel="nofollow" href="' .$url .'" class="tt_button tt_primary_button">'; echo __('More Information','woocommerce'); echo '</a></div>'; } } 样式的位置为：“绝对”。因此，您期望看到的行为是正确的，因为每个文本都位于相同的“绝对”位置。删除它应该给您想要的结果。

由于您的descriptionContainer View是map函数中的根元素，因此将引发键警告，因此它应该具有键。希望这对下面更新的源代码有所帮助，并带有一些我无法测试的免责声明。

descriptionText