我正在开发一个使用React-Native的应用程序。 我想在图像组件的右下角放置一个图标,但它始终位于左上角。
有任何帮助吗?非常感谢你。
答案 0 :(得分:19)
<Image source={imageSource} style={{position: "absolute", bottom: 0, right: 0}}/>
答案 1 :(得分:17)
您可以使用justifyContent: 'flex-end'
来实现此目标:
const withWatermark = (asset, logo) => (
<Image style={{ width: 200, height: 200, justifyContent: 'flex-end' }} source={asset}>
<Image style={{ width: 20, height: 20, alignSelf: 'flex-end' }} source={logo} />
</Image>
);
答案 2 :(得分:0)
您可以执行以下操作...
使用这个:position: "absolute", bottom: 0, alignSelf: "flex-end"
<ImageBackground
source={require("../assets/homeAssets/3.jpg")}
style={{
height: 140,
width: 140,
resizeMode: "contain",
alignItems: "center"
}}
imageStyle={{ borderRadius: 70 }}
>
<View
style={{
height: 50,
width: 50,
borderRadius: 25,
backgroundColor: "#99AAAB",
alignItems: "center",
justifyContent: "center",
position: "absolute", //Here is the trick
bottom: 0,
alignSelf: "flex-end"
}}
>
<Entypo name="camera" size={25} color="#FFF" />
</View>
</ImageBackground>