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

您可以使用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
  }
});

Flex / Javascript：覆盖组件

1 个答案: