React Native：图像显示Android与iOS的差异

Question

我正在尝试展示使用由白色边框包围的flexbox缩放的远程图像，Android和iOS都不按照我希望的方式处理我的解决方案。 iOS仅显示白色边框，而Android仅显示图像。

这是相应的代码。问题源于哪些指针？

import React, {Component} from 'react';
import {Text, View, Image} from 'react-native';
import Header from './../Header';
import Icon from 'react-native-vector-icons/FontAwesome';


export default class DailyArticlesScreen extends Component {

constructor(props) {
    super(props);
    this.displayName = 'DailyArticlesScreen';
}

render() {

    return (

        <View style={this.props.style}>
            <Header text='Heute'/>
            <View style={styles.container}>

                {
                    dummyData.articles.map(item => {
                        return (
                                <View style={styles.contentItem} key={item}>
                                    <View style={styles.imageContainer}>
                                        <Image 
                                            source={{uri: 'http://placekitten.com/100/100'}}
                                            style={styles.image}
                                            resizeMode="contain"
                                        />
                                    </View>

                                    <View style={styles.teaserTextContainer}>
                                        <Text style={styles.teaserTitle}> Title </Text>
                                        <Text style={styles.teaserText}> Lorem ipsum </Text>
                                    </View>

                                    <View style={styles.arrow}>
                                        <Icon name='chevron-right' size={30} color="#5d686d" />
                                    </View>

                                </View>

                            )
                    })

                }


            </View>
        </View>

        );
}
};

const styles={
container: {
    flex: 9,
    flexDirection: 'column',
    alignItems: 'stretch',
    backgroundColor: '#ccc'
},
contentItem: {
    flex: 3,
    flexDirection: 'row',
    alignItems: 'stretch',
    borderBottomWidth: 1,
    borderBottomColor: '#929292'

},
imageContainer: {
    flex: 4,
    padding: 20
},
image: {
    flex: 1, 
    borderWidth: 5, 
    borderColor: '#fff'
},
teaserTextContainer: {
    flex: 4,
    paddingBottom: 20,
    paddingTop:20
},
teaserTitle: {
    fontWeight: '700',
},
arrow: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center'
}


};

const dummyData = {
    articles: [1,2,3]
};