Flex / Javascript：覆盖组件答案

【问题标题】：Flex / Javascript: overlay componentsFlex / Javascript：覆盖组件
【发布时间】：2018-03-26 08:27:30
【问题描述】：

我想在背景中有一张图片，在它上面有另一张图片（透明）和一些文字说明。 p>

我尝试了以下代码，但它不起作用，因为它为三个组件分配了三个相等的空间。

有没有办法让组件相互叠加？

图片代码：

export default ({segments, value, onPress}: Props) => {
  return (
      <View style={{flex:1}}>
        <Image
          style={styles.backdrop}
          source={{uri: 'https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg'}}
        />
        <Image
          style={styles.backdrop}
          source={{uri: 'https://i1.wp.com/sharmajitech.in/wp-content/uploads/2017/04/4-stars.jpg'}}
        />
        <Text style={styles.headline}>
            <Text>
              {"Some text"} 
              </Text>
              <Text>
              {"Other text"} 
              </Text>
          </Text>
      </View>
  )
}

用法：

<View
  style={{
    flex: 0.4,
    backgroundColor: 'silver',
  }}
>
 {
    <HeroImageTwo
    segments={[
      {label: "This is much longer", value: "a"},
      {label: "b", value: "b"},
    ]}
    value="a"
    onPress={action("press")}
  /> }
 </View>

实际结果：

3个组件占据相同的宽度高度并且没有覆盖

想要的结果：

将第一张图片作为背景，并过度播放文本和其他图片

【问题讨论】：

将绝对位置赋予其他两个组件以将它们定位在第三个组件之上。

标签： javascript css react-native flexbox

【解决方案1】：

您可以使用 CSS 中的 position 属性来实现所需的行为。

position属性指定使用的定位方法的类型用于元素（静态、相对、固定、绝对或粘性）。

示例 (Working Snack)

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image source={require('./assets/overlay1.png')} resizeMode="contain" style={styles.image} />
        <Image source={require('./assets/overlay2.png')} resizeMode="contain" style={styles.image} />
        <Image source={require('./assets/overlay3.png')} resizeMode="contain" style={styles.image} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    justifyContent: 'center',
    alignItems: 'center'
  },
  image: {
    position: 'absolute',
    width: 250
  }
});

【讨论】：