我想为我的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",
}
});