在React Native中，View元素内的图像未向右对齐

Question

我正在reactnative中实现一个tile，我必须像这样在tile中设置Image我想要什么(点击这里(

这就是我现在可以实现的我得到的((

这是我的代码

<View style={styles.container} >
<Image
style={styles.image}
source={item.image}
resizeMode="cover"
/>
<View style={styles.overlay} />
<View style={styles.textContainer}>
<Text style={styles.subText}>{item.title}</Text>
<Text style={styles.headingText}>{item.message}</Text>
</View>
</View>

这就是

const styles = StyleSheet.create({
container: {
backgroundColor: '#206c72',
alignItems: 'flex-end',
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
marginTop: 20
},
image: {
width: COURSE_ITEM_WIDTH,
height: 120,
borderRadius: 10
},
textContainer: {
position: 'absolute',
left: 16,
flex: 1,
},
headingText: {
fontSize: 18,
color: '#ffffff',
marginTop: 5
},
subText: {
fontSize: 14,
color: '#ffffff',
},
timeText: {
fontSize: 15,
color: 'white',
textAlign: 'center',
marginTop: 5
},
overlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#206c72',
opacity: 0.6,
borderRadius: 10
}
})

请帮帮我，我不知道我做错了什么。提前感谢！

[注意：请忽略内容，专注于对齐]

Answer 1

您的图像向右对齐，但左侧没有任何内容。您应该将flexDirection:'row'添加到父容器中，并在图像之前放置一个带有width : 40px的空视图。您也可以从主容器中删除alignItems:flex-end和justifyContent:center

Answer 2

您可以将alignSelf属性添加到图像的flex端，图像将位于平铺的端部。

示例1:

image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
alignSelf: "flex-end"
},

作为参考，我尝试了一个沙箱示例，在这里查看

还注意到您使用了两次alignItems值，第一次只需要删除第二次alignItems并从styles.container中定位相对值，然后将图像对齐到末尾。你会得到你想要的的确切结果

示例2:

container: {
backgroundColor: '#206c72',
alignItems: 'flex-end',   // only need this alignItems 
borderRadius: 15,
width: COURSE_ITEM_WIDTH,
elevation: 7,
justifyContent: 'center',
marginTop: 20
},
image: {
width: "50%",
height: 120,
borderRadius: 10,
backgroundColor: "red", //for making sure how much space is taken by image you can remove on further
// no need of alignSelf to flex-end here
},