Блог

В одном из моих побочных проектов, использующих React Native, я пытаюсь создать необычный пользовательский интерфейс для страницы профиля. Я хотел бы создать настраиваемый верхний фоновый компонент, подобный тому, который разработан Soft-UI от Creative Tim, но я не очень уверен, как лучше всего это сделать.

Вот снимок того, что я пытаюсь выполнить. Страница профиля программного интерфейса

Любая помощь будет с благодарностью принята.

Вот полный пример того, что я сделал из того, что вы хотите (https://snack.expo.dev/@heytony01/curious-apples ). Я объясняю, что я сделал ниже.

Ключ в том, чтобы понять flex box и абсолютную позицию.Хорошее место для изучения flex box — это (https://flexboxfroggy.com /) . Прочитайте документацию для position absolute (https://reactnative.dev/docs/layout-props )

Сначала используйте flex box, чтобы получить один вид, чтобы покрыть нижние 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>
 

UI Kitten — лучший способ добиться причудливых пользовательских интерфейсов в React Native: https://akveo.github.io/react-native-ui-kitten/docs/guides/getting-started#getting-started

Хотя этот пользовательский интерфейс наверху выглядит как простая закругленная карточка с линейным градиентом в качестве цвета фона