javascript - 柔性/Javascript : overlay components

Question

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

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

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

图片代码:

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个组件占据相同的宽高且没有重叠

期望的结果:

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

Answer 1

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

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

示例 ( 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
  }
});