反应本机地图Android标注不根据内容拉伸答案

【问题标题】：React native maps Android Callout not streching according to the content反应本机地图Android标注不根据内容拉伸
【发布时间】：2020-12-17 11:20:26
【问题描述】：

所以，我在我的应用中实现了react-native-maps 并添加了一个标记。我正在使用callout 显示有关该职位的一些信息，例如一些计数器和一些时间。我遇到的问题是当我使用ref.current.showCallout() 更新callout 的内容时，因为我从服务器获取时间，因此信息的可访问性略有延迟（稍后更新一些信息= > 更多内容显示在callout)。所以，在iOS 上，callout 看起来不错，当我从服务器获取response 时，标注会根据内容一直显示（它们被渲染）（正在改变它的height）看起来像一个“列表”，实际上每次都是一行）。但是在Android 上，height 保持不变。 android callout 似乎有一个standard height。下面是我用于callout 的代码：

<Callout tooltip={true} style={{ flex: 1}}>
  <View>
    <View style={styles.calloutContainer}>
      <View style={{justifyContent:'center', alignItems:'center'}}>
        <Text style={{fontSize:18, fontWeight: 'bold'}}>Teatru</Text>
        <Text style={{margin:5,fontSize:14}}>{ora}</Text>
      </View>
      <View style={{flexDirection:'row', justifyContent:'space-between'}}>
        <View style={{flexDirection:'row', alignItems:'center'}}>
          <FontAwesomeIcon icon={faUser}
              color={albastru_scope}
              size={18}
              margin= {5}/>
          <Text>{auth.stare.nr_persoane}</Text>
        </View>
        <View style={{flexDirection:'row', alignItems:'center'}}>
          <FontAwesomeIcon icon={faWalking}
              color={albastru_scope}
              size={18}
              margin= {5}/>
          <Text>{auth.stare.nr_pietoni}</Text>
        </View>
        <View style={{flexDirection:'row', alignItems:'center'}}>
          <FontAwesomeIcon icon={faBicycle}
              color={albastru_scope}
              size={18}
              margin= {5}/>
          <Text>{auth.stare.nr_biciclisti}</Text>
        </View>
        <View style={{flexDirection:'row', alignItems:'center'}}>
          <FontAwesomeIcon icon={faCar}
              color={albastru_scope}
              size={18}
              margin= {5}/>
          <Text>{auth.stare.nr_vehicule}</Text>
        </View>
      </View>
      <View style={{marginTop:7}}>
        <View style={styles.textTitleStyleContainer}>
          <Text style={styles.textTitleStyle}>Următoarele autobuze</Text>
        </View>
        {arrivals=="1"? (<Text>Nimic :(</Text>) : (
          arrivals.map((arrival)=> (
            <Text key={arrival.route_sn}>Linia {arrival.route} : {arrival.arrival}</Text>
          ))
        )}
      </View>
    </View>
  </View>
</Callout>

我尝试添加到 callout style : { height: 200} 但没有任何反应。也尝试将静态 height 添加到 callout childrens 但同样，在 Android 上什么也没发生。更改那些heights 显示在iOS 上，但不在android 上。任何帮助将不胜感激，谢谢！

【问题讨论】：

标签： android react-native react-native-maps

【解决方案1】：

我发现了问题，我会写下来，以防其他人遇到这个问题。

拥有

arrivals=="1"? (<Text>Nimic </Text>) : (
          arrivals.map((arrival)=> (
            <Text key={arrival.route_sn}>Linia {arrival.route} : {arrival.arrival}</Text>
          ))

要渲染组件，首先arrivals 实际上是1，所以callout 将只使用1 行来渲染该部分。因此，当信息更新时，callout 的height 将保持不变，对于

arrivals.map((arrival)=> (
            <Text key={arrival.route_sn}>Linia {arrival.route} : {arrival.arrival}</Text>
          )

只有 1 行可渲染。

【讨论】：