1
View-Elementの背景画像として機能する画像を含むView-Elementがあります。背景画像は、上、左、右、下を0に設定して絶対配置されますが、まだそれは親です(画像の赤い枠線で見ることができます)。React Native:親よりも高い絶対位置の画像
誰もがなぜ知っていますか?
<View style={styles.headerContainer}>
<Image source={Images.headerBg} style={styles.headerBackgroundImage} resizeMode="cover" />
<View style={styles.headerRow}>
<View style={styles.headerColumn}>
<TouchableOpacity style={styles.magicHeartButton}>
<Icon
name="heart"
size={12}
color="red"
style={styles.magicHeartButtonIcon}
/>
<Text style={styles.magicHeartButtonText}>247</Text>
</TouchableOpacity>
</View>
<View style={styles.headerColumn}>
<TouchableOpacity style={styles.tonightButton}>
<Text style={styles.tonightButtonText}>right column</Text>
</TouchableOpacity>
</View>
</View>
</View>
スタイルシート:
headerContainer: {
backgroundColor: '#ffd700',
height: 40,
position: 'relative',
borderWidth: 1,
borderColor: 'red',
},
headerRow: {
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
headerColumn: {
padding: 10,
},
headerBackgroundImage: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
'オーバーフローを試してみてください。「hidden''、それが原因' cover' – sodik
@sodikオーバーフローに大きいです。 'hidden' が助けました、ありがとうが、動作は他のresizeModes(ストレッチ)と同様に起こっています。これは奇妙なものであり、私の意見では起こるべきではありません –