React Native如何实现圆角的上层背景组件？

Question

在我的一个使用 React Native 的副项目中，我试图为个人资料页面做一个花哨的 UI。我想制作一个可自定义的上半部分背景组件，就像 Creative Tim 的 Soft-UI 那样，但我不太确定最好的方法是什么。

这是我要完成的任务的快照。 Soft-UI profile page

如有任何帮助，我们将不胜感激。

Answer 1

UI Kitten 是在 React Native 中实现花式 UIs 的最佳方式：https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#getting-started

尽管顶部的 UI 看起来只是一张简单的圆形卡片，背景颜色为线性渐变

Answer 2

这是我根据您的需要制作的完整示例 (https://snack.expo.dev/@heytony01/curious-apples)。我在下面解释我做了什么。

关键是理解flex box和position absolute。学习flex box的好地方是(https://flexboxfroggy.com/) .阅读绝对位置的文档 (https://reactnative.dev/docs/layout-props)

先用flex box让一个view覆盖屏幕底部2/3，顶部屏幕覆盖屏幕顶部1/3

<View style={{flex:1}}>

         {/* Top  1/3*/}
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
        
        </View>

        {/* Bottom  2/3*/}
       <View style={{flex:2,justifyContent:"center",alignItems:"center"}}>

      </View>

</View>

接下来创建顶级用户配置文件组件

<View style={{flex:1}}>

         {/* Top  1/3*/}
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
           
          {/* Purple card*/}
           <View style={{
            width:"90%",
            height:"90%",
            backgroundColor:"purple",
            borderRadius:"5%",
            justifyContent:"center",
            alignItems:"center",
            fontSize:10
            }}>
              
            </View>
        
        </View>

        {/* Bottom  2/3*/}
        
       <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>

      </View>
</View>

接下来将跟随栏设为绝对位置，以便您可以覆盖其他视图

<View style={{flex:1}}>

         {/* Top  1/3*/}
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
           
          {/* Purple card*/}
           <View style={{
            width:"90%",
            height:"90%",
            backgroundColor:"purple",
            borderRadius:"5%",
            justifyContent:"center",
            alignItems:"center",
            fontSize:10
            }}>
              
            </View>

           {/* Postion absloute bar*/}
           <View style={{
           zIndex:99, // Puts it above the other view
           position:"absolute",
           flexDirection:"row",
           bottom:-5,
        
           width:"70%",
           height:"20%",
           backgroundColor:"lightgray",
           borderRadius:10}}>
              
           </View>
        
        </View>

        {/* Bottom  2/3*/}
        
       <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
    
       </View>
      
</View>

React Native如何实现圆角的上层背景组件？

How to accomplish the rounded upper background component in React Native?

user-interface

frontend

react-native