React Native中的重叠和定位元素

Question

我正在尝试重叠线框中显示的元素，以及定位它们。

我试过了 - 位置：'相对'，元素消失 - position：'absolute'但alignItems：'center'什么都不做

任何人都可以帮助确定遗漏的内容吗？

Wireframe of Wishlist (ignore the different header; it was from an old version)

This is what I get instead, even after using flex

我附加了所有单独的.js文件中的代码，并省略了所有导入和导出语句。

谢谢！

----------- in WishlistDetail.js------------

// Each Item on The Wishlist
const WishlistDetail = () => {
  return (
    <View>
      <WishlistCard>
        <WishlistThumbnail />
        <WishlistThumbnailFilter />
        <WishlistPrice />
        <WishlistItemDetail />
      </WishlistCard>
    </View>
  );
};


---------- in WishlistCard.js------------------


// Creating WishlistCard
const WishlistCard = (props) => {
  return (
      <View style={styles.containerStyle}>
        {props.children}
      </View>
  );
};

// WishlistCard Style
const styles = StyleSheet.create({
  containerStyle: {
    borderWidth: 0.75,
    backgroundColor: 'white',
    borderColor: 'rgb(217, 217, 217)',
    height: 125                                         // ******* not too sure
  }
});

---------- in WishlistThumbnail.js------------------

const WishlistThumbnail = () => {
    const { wishlistThumbnailStyle } = styles;
    return (
      <View>
        <Image
          style={wishlistThumbnailStyle}
          source={{ uri: 'http://www.startwire.com/job-applications/logos/amazon.png' }}
        />
      </View>
    );
};

// All Styling
const styles = StyleSheet.create({
    wishlistThumbnailStyle: {
      height: 95,
      width: 95,
      padding: 20,
      position: 'absolute',
      justifyContent: 'center'
    }
});


---------- in WishlistThumbnailFilter.js------------------

// Creating Wishlist Thumbnail Filter
const WishlistThumbnailFilter = () => {
  return (
    <View style={styles.wishlistThumbnailFilterStyle} />
  );
};

// Image Filter Style - 146 125 192.2
const styles = StyleSheet.create({
  wishlistThumbnailFilterStyle: {
    width: 160,
    borderTopColor: 'rgba(13, 13, 13, 0.05)',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopWidth: 250,
    borderLeftWidth: 0,
    borderRightWidth: 90
  }
});

---------- in WishlistPrice.js------------------

const WishlistPrice = () => {
  const { textStyle, viewStyle } = styles;
  return (
                                                                    //INSERT PRICE HERE
    <View style={viewStyle}>
      <Text style={textStyle}>30€</Text>
    </View>
  );
};

// Wishlist Price  Style
const styles = StyleSheet.create({
  viewStyle: {
    backgroundColor: 'transparent',
    padding: '3',
    // alignItems: 'flex-end',
    justifyContent: 'flex-end',
    position: 'absolute'
    // position: 'relative'
  },
  textStyle: {
    fontSize: 11.5,
    fontFamily: 'Bariol_Regular',
    color: 'rgb(127, 127, 127)'
  }
});


---------- in WishlistItemDetail.js------------------

// This contains both Wishlist Title and Wishlist Text
const WishlistItemDetail = () => {
  const { wishlistItemDetailStyle, wishlistItemTitleStyle, wishlistItemTextStyle } = styles;
  return (
    <View style={wishlistItemDetailStyle}>
      <Text style={wishlistItemTitleStyle}>Wishlist Item Title</Text>
      <Text style={wishlistItemTextStyle}>Wishlist Item Text</Text>
    </View>
  );
};

// Header Style
const styles = StyleSheet.create({
  wishlistItemDetailStyle: {
    backgroundColor: 'transparent',
    position: 'absolute',
    padding: 5
  },
  wishlistItemTitleStyle: {
    fontSize: 15,
    fontFamily: 'Bariol_Regular',
    color: 'rgb(51, 51, 51)'
  },
  wishlistItemTextStyle: {
    fontSize: 12,
    fontFamily: 'Bariol_Regular',
    color: 'rgb(70, 70, 70)'
  }
});

Answer 1

不想过多详细说明，这似乎与您column row vs flexDirection的问题相似。

为了获得您提供的线框样式，您需要同时使用row和column的组合。查看此文档：https://facebook.github.io/react-native/docs/flexbox.html

因此，一行包含两个在flexrow中设置样式的主视图，一个我标记为蓝色的视图在一列中设置样式（这是默认设置）。

希望这有帮助