React-native 两个视图之间有图像

Question

我是 react-native 的新手，我想做一个基本上有 2 Views 并且在它们之间有一个圆形 Image 的页面（如图所示），我知道如何做 2 Views 但我不知道如何正确地把 Image 放在那里。

Answer 1

这应该有效：

<View style={{flex: 1}}>
    <View style={{height: 200, backgroundColor: 'grey'}}></View>
    <View style={{flexGrow: 1, backgroundColor: 'black', alignItems: 'center'}}>
      <Image
        source={require('./icon.png')} 
        style={{
          position: 'absolute',
          top: -40,
          height: 80,
          width: 80}} 
        />
    </View>
  </View>