web-dev-qa-db-ja.com

React-Native画像コンポーネントの右下隅に子ビューを配置する方法は？

React-Nativeでアプリを開発しています。画像コンポーネントの右下隅にアイコンを配置したいのですが、常に左上隅に残ります。

何か助け？どうもありがとうございました。

imagelayoutreact-native
18
Ben
<Image source={imageSource} style={{position: "absolute", bottom: 0, right: 0}}/>
23
RasTheDestroyer

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>
);
22
jmurzy

このようなことができます...これを使用してください：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>
0
Chirag Chopra