如何在 React-Native 图像组件的右下角定位子视图？答案

【问题标题】：how to position a child view on right-bottom corner of a React-Native image component?如何在 React-Native 图像组件的右下角定位子视图？
【发布时间】：2016-08-24 05:20:32
【问题描述】：

我正在使用 React-Native 开发一个应用程序。我想在图像组件的右下角放置一个图标，但它总是停留在左上角。

有什么帮助吗？非常感谢。

【问题讨论】：

标签： image layout react-native

【解决方案1】：

<Image source={imageSource} style={{position: "absolute", bottom: 0, right: 0}}/>

【讨论】：

【解决方案2】：

您可以使用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>
);

【讨论】：

com.facebook.react.common.JavascriptException：错误：组件不能包含子组件。如果您想在图像顶部呈现内容，请考虑使用组件或绝对定位。

【解决方案3】：

你可以做这样的事情...... 使用这个：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>

【讨论】：