如何使一个图像居中,但另一个图像在左上角



我想为我的React Native应用程序创建一个头。它将有一个主图像居中,然后在其左侧(靠近屏幕边缘(有一个后退按钮。目前,我可以将它们放在同一行,并将主图像居中,但无法弄清楚如何将后箭头图像移到最左边。

这是我的密码。

<View style={styles.container}>
<View style={styles.row}>
<Image style={styles.backarrow} source={require('./images/backarrow.png')} />
<Image style={styles.minilogo} source={require('./images/minibear.png')} />
</View>
</View>

这就是样式代码。

container: {
flex: 1,
backgroundColor: '#5683C7',
alignItems: 'center',
justifyContent: 'center',
},
minilogo: {
height: 100,
width: 100,
},
backarrow: {
height: 50,
width: 40,
},
row: {
flexDirection: 'row',
margin: 15,
alignItems: 'center',
}

理想情况下,它看起来像这个

如有任何帮助,我们将不胜感激!谢谢

使用边框宽度可以调整布局应用此样式表

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#5683C7',
alignItems: 'center',
justifyContent: 'center',
flexDirection:"column"
},
minilogo: {
height: 100,
width: 100,
justifyContent:"flex-end",
flex:7,
},
backarrow: {
height: 50,
width: 40,
justifyContent:"flex-start",
alignSelf:"center",
flex:3,
},
row: {
flexDirection: 'row',
width:"100%",
margin: 1,
resizeMode:"stretch",
// backgroundColor:"green",
//  borderWidth:1,
alignItems:"stretch",
}
});

最新更新