react-native - React Native Image 不适用于 android 谷歌地图自定义视图

Question

我在谷歌地图的标记上连续显示五颗星的评级。它在 iO 上运行良好，但在 Android 上没有加载图像。我不明白为什么，因为我可以在整个应用程序的其余部分使用该标签。在谷歌地图上显示自定义图像似乎只是一个问题。

资产路径正确。我尝试过导入图像以及使用 uri url。android 似乎没有任何内容。这是唯一有问题的页面...

这是一个已知的问题？

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.Transparent,
    flexDirection: "row",
    flex: 1,
    alignSelf: "center",
  },
  image: {
    width: 25,
    height: 25,
  },
});

const StarRating = props => {
  let rating = props.ratingValue;
  console.log("rating", rating);
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
      <Image style={styles.image} source={require("assets/star-filled.png")} />
    </View>
  );
};

ios工作：

安卓不工作

标签： react-nativeandroid-imagereact-native-mapsreact-native-image

Answer 1

我确实认为这是 Android 上的一个错误，即 Callout 组件无法在 IOS 上渲染图像。

对于这种情况，我看到您所要做的就是在您的标注组件中渲染五颗星。好消息是使用 expo/vector-icons 可以获得同样的效果。我的意思是你可以像这样重写你的代码：

const StarRating = props => { let rating = props.ratingValue; console.log("rating", rating); return ( <View style={styles.container}> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> <Ionicons name="star" size={10}/> </View> ); };