【问题标题】:Positioning image inside an image in React-Native在 React-Native 中的图像内定位图像
【发布时间】:2021-06-26 15:28:33
【问题描述】:

我想将一个图像放置在另一个图像之上,但它不应受到父图像“包含”参数的影响。如果我删除 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>

【问题讨论】:

    标签: css reactjs react-native


    【解决方案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%',
      },
    
      
    });
    

    【讨论】:

    • 哪个组件使用container1样式?我想你错过了什么
    • 更新了答案@kutaykurt
    • 它不起作用,小图像不显示,因为您没有为“图像”样式提供任何尺寸。当我给它宽度和高度属性和位置:绝对时,它仍然将自己定位到空白空间
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-12-13
    • 1970-01-01
    • 2021-11-15
    • 1970-01-01
    • 1970-01-01
    • 2016-08-24
    • 1970-01-01
    相关资源
    最近更新 更多