es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Crear diseño con valores absolutos y Flexbox en React Native.

01 Jun, 2023 Programación

Soy un desarrollador de iOS tratando de aprender React Native. Actualmente estoy tratando de averiguar cómo crear un diseño como este con FlexBox:

LayoutGoal

No estoy seguro de cómo utilizar valores relativos para el ancho en React Native. Cuando trato de implementarlo, obtengo esto:

Wrong Layout

Como puedes ver, la vista en el medio corta las vistas de la izquierda y derecha en su centro. ¿Alguna idea? Aquí está mi código:

<view style="{{flexDirection:" 'row',="" flex:="" 1}}="">
    <safeareaview>
      <touchableopacity style="{{left:" 20,="" top:="" 24,="" height:="" 44,="" width:="" 44}}="">
        <image source="{require('../../assets/images/backButton.png')}" style="{{height:" '100%',="" width:="" '100%'}}=""></image>
      </touchableopacity>
    </safeareaview>
    <view style="{{flex:" 2,="" backgroundcolor:="" '#ff2f2f'}}=""></view>
    <safeareaview>
      <text style="{{" right:="" 20,="" top:="" 24,="" height:="" 44,="" fontsize:="" 14,="" }}="">
        1 / 6
      </text>
    </safeareaview>
  </view>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el diseño deseado utilizando FlexBox, debes hacer los siguientes cambios en tu código:

    1. Agrega la propiedad de estilo justifyContent: 'space-between' al contenedor principal para empujar las vistas izquierda y derecha a los extremos.
    2. Usa flex: 1 en lugar de height: 44 para el componente Text para hacer que ocupe la altura disponible y alinear verticalmente.
    3. Elimina los estilos de izquierda y derecha (left: 20 y right: 20) de las vistas para que se ajusten automáticamente según el espacio disponible.

    Aquí está el código actualizado:

    <view style="{{flexDirection:" 'row',="" justifycontent:="" 'space-between',="" alignitems:="" 'center',="" flex:="" 1}}="">
  <touchableopacity style="{{height:" 44,="" width:="" 44}}="">
    <image source="{require('../../assets/images/backButton.png')}" style="{{height:" '100%',="" width:="" '100%'}}=""></image>
  </touchableopacity>
  <view style="{{flex:" 2,="" backgroundcolor:="" '#ff2f2f'}}=""></view>
  <text style="{{flex:" 1,="" textalign:="" 'center',="" fontsize:="" 14}}="">1 / 6</text>
</view>

    Esto debería darte el diseño deseado como se muestra a continuación:

    Updated Layout

Comments are closed.