白い境界線で囲まれたフレックスボックスでスケーリングするリモート画像を表示しようとしていますが、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]
};