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

Question

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

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

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

Answer 1

这是我根据您的需要制作的完整示例 (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

<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>