我可以在React-Native中显示图像视图吗？

Question

我刚刚盯着反应本地人。

我遇到了一个奇怪的情况。

在模拟器的iOS中，它很好。 （如下）

但是，在设备的Android中，它不是。

我将保证金设置为负值但在Android中减少了。 而且图像都是黑色的。

整个代码。

import React from 'react';
import {
    ActivityIndicator,
    Platform,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Dimensions
} from 'react-native';
import Image from 'react-native-scalable-image';
import resolveAssetSource from 'resolveAssetSource';
// import FastImage from 'react-native-fast-image'
import {scale, moderateScale, verticalScale} from '../utils/scaling';

export default class MeuScreen extends React.Component {
    static navigationOptions = {
        header: null,
        title: null
    };

    render() {
        let meuBg = require('../assets/images/meu_home_bg.jpg');
        let meuBgSource = resolveAssetSource(meuBg);
        const bgImg = <Image width={Dimensions.get('window').width} source={meuBg} style={styles.topBg}/>;
        return (
            <View style={styles.container}>
                {bgImg}
                <View style={styles.boxWrap}>
                    <View style={styles.roundBox}>
                        <View style={styles.guys}>
                            <Image resizeMode="cover" style={styles.me} width={60} height={60}
                                   source={{uri: 'https://static.pexels.com/photos/213117/pexels-photo-213117.jpeg'}}/>
                            <Image resizeMode="cover" style={styles.you} width={60} height={60}
                                   source={{uri: 'https://static.pexels.com/photos/213117/pexels-photo-213117.jpeg'}}/>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
        container: {
    flex: 1,
    backgroundColor: 'rgba(239, 244, 255, 0.36)',
    position: 'relative',
    alignItems: 'center'
},
topBg: {
    position: 'absolute', top: 0,
    zIndex: 1
},
roundBox: {
    width: Dimensions.get('window').width - 60,
    minHeight: 300,
    borderWidth: 1,
    borderColor: '#e5e5e5',
    borderRadius: 30,
    backgroundColor: '#fff',
    marginTop: verticalScale(165),
    zIndex: 2
},
guys: {
    flex: 1,
    marginTop: verticalScale(-25),
    flexDirection: 'row',
    zIndex: 3
},
me: {
    borderWidth: 4,
    borderColor: '#fff',
    borderRadius: 30,
    position: 'absolute',
    top: 0, left: scale(46)
},
you: {
    borderWidth: 4,
    borderColor: '#fff',
    borderRadius: 30,
    position: 'absolute',
    top: 0, right: scale(46)
},
category: {},
location: {},
dates: {}
});

首先，我必须像网络一样思考。 （位置和z指数） 但RN不支持'z-index'。 我该如何工作？

请帮助..

Answer 1

请在图像样式中指定图像宽度和高度。

 <Image resizeMode="cover" style={[styles.me,{width:60,height:60}]} source={{uri: 'https://static.pexels.com/photos/213117/pexels-photo-213117.jpeg'}}/>