React Native在View上绘制自定义的圆角边缘

Question

我想创建一个在视图上具有圆角的视图，以响应本机图像，如您在图像中看到的那样。我已经有了我想要的白色视图。但是，它应该延伸到黑色曲线。我有什么选择，如何实现？

先谢谢您。  

Answer 1

您可以通过添加底部边框半径并使用transform属性将其放大来使白色视图变为椭圆形。

然后，如果将其部分放置在第二个视图上方，则会得到预期的输出。

这里是一个例子：

import * as React from 'react';
import { View, StyleSheet } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.first} />
          <View style={styles.second} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute', 
    width: '100%',
    backgroundColor: '#fff',
  },
  first: {
    backgroundColor: '#fff',
    alignSelf: 'center',
    width: 100,
    height: 100,
    borderBottomRightRadius: 50,
    borderBottomLeftRadius: 50,
    transform: [{ scaleX: 4 }],
    zIndex: 1,
  },
  second: {
    backgroundColor: '#333',
    marginTop: -30,
    height: 200,
    zIndex: 0,
  },
});

这里是the example in action。