如何使用 React Native 导航创建弯曲的 header？

Question

不确定我的问题是否正确，但我想创建这样的视图，这怎么可能？顺便说一句，黑暗的区域必须是白色的，即在椭圆曲线下方。我正在使用反应本机导航。

Answer 1

四处走动是在屏幕容器视图上添加弯曲部分，而不是在顶部栏上。我在我之前开发的一个应用程序中使用了这种方法，效果很好。

<View style={{flex:1,backgroundColor:"#fff"}}>
  <View style={{flex:1,backgroundColor:"green", borderRadius:10}}>
  //Place your components here
  </View>
</View>

Answer 2

您可以在 <View> 样式中使用 borderRadius css 组件。

<View style={{flex: 1, boderRadius:15}}
...your code
</View>

如何使用 React Native 导航创建弯曲的 header？

How to create curved header with react native navigation?

react-native

react-native-android

react-native-ios