相互渲染平面列表项目（重叠）

Question

我想实现您在下图中看到的效果，但我不知道让平面列表项相互重叠：

忘记左右图标，我只是在寻求一种方法，让中间容器可以相互渲染卡片。提前 tnx

Answer 1

工作示例：https://snack.expo.io/@msbot01/sponaneous-salsa

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{flexDirection:'row', justifyContent:'flex-end', backgroundColor:'white', paddingTop:10, paddingBottom:10}}>
        <View style={{backgroundColor:'transparent'}}>
          <View style={[styles.shadow, {backgroundColor:'red', borderTopLeftRadius:40, borderBottomLeftRadius:40}]}>
            <Text style={styles.paragraph}>
              First
            </Text>
          </View>
        </View>
        <View style={{backgroundColor:'red', borderBottomWidth:0, borderColor:'white'}}>
          <View style={[styles.shadow, {backgroundColor:'red', borderTopLeftRadius:40, borderBottomLeftRadius:40}]}>
            <Text style={styles.paragraph}>
              second  
            </Text>
          </View>
        </View>
        <View style={{backgroundColor:'red', borderBottomWidth:0, borderColor:'white'}}>
          <View style={[styles.shadow, {backgroundColor:'red', borderTopLeftRadius:40, borderBottomLeftRadius:40}]}>
            <Text style={styles.paragraph}>
              third
            </Text> 
          </View>
        </View>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  shadow:{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 4,  
    elevation: 5
  }
});