React Native Maps and callout with images

问题

I am not able to display images (both from the assets and web) in custom marker callout : the image in callout is always shown as a blank rectangle.

class CustomCalloutView extends React.Component {

    render() {
        return (

            <View>
                <View>
                    <Text style={{
                        fontWeight: "bold",
                    }}>
                        Test
                </Text>
                </View>
                <View>
                    <Image
                        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
                        style={{ width: 100, height: 100 }}
                    />
                </View>
            </View>

        )
    }
}

And the main Map component is:

<MapView
    style={{ flex: 1 }}
    initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}>
    {this.state.markers.map(marker => (
        <Marker
            key={marker.id}
            coordinate={marker.latlng}>
            <Callout>
                <CustomCalloutView />
            </Callout>
        </Marker>
    ))}
</MapView>);

The marker is correctly shown, and the callout renders, but the image is not shown. The same image works if i use it in a normal view.

I am using expo (expo.io) but also tried emulator and installed APK on the device (android; no info about ios).

回答1:

Use Image inside Text component. Something like this:

<Text>
<Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" />
</Text>

来源：https://stackoverflow.com/questions/54436503/react-native-maps-and-callout-with-images