css - 在 React-Native 中的图像内定位图像

Question

我想将一个图像放置在另一个图像之上，但它不应该受到父图像“包含”参数的影响。如果我删除 resizeMode="contain" ，它工作正常，但否则，它看起来像这样：

我想要的是，将小图像放在父图像内。我实际上想将小图像放置在确切的角落。由于 resizeMode="contain" 而不是在空白处。我的代码如下所示：

<PagerView style={styles.pager} initialPage={0} showPageIndicator>
    <View style={styles.picView} key={i}>
      <ImageBackground
        resizeMode="contain"
        style={styles.pic}
        source={{
          uri: post.contents[i].path,
        }}
      >
        <Image
          style={{ position: "absolute", height: 100, width: 100 }}
          source={{
            uri: post.contents[i].path,
          }}
        />
      </ImageBackground>
    </View>
  </PagerView>

标签： cssreactjsreact-native

Answer 1

我希望这对你有用，我也必须做类似的事情，所以我这样使用它，它对我有用。

<PagerView style={styles.pager} initialPage={0} showPageIndicator>
    <View style={styles.container} key={i}>
      <ImageBackground
        resizeMode="contain"
        style={styles.pic}
        source={{
          uri: post.contents[i].path,
        }}
      >
     <View style={styles.container1}>
        <Image
          style={styles.image}
          source={{
            uri: post.contents[i].path,
          }}
        />
    </View>
      </ImageBackground>
    </View>
  </PagerView>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
container1: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
 
  pic: {
    flex: 1,
    width: '100%',
  },

  
});