En react native no puedo usar algo como float:left o float:right, así que quiero alinear los elementos de extrema izquierda y derecha, ¿cómo puedo hacer eso? He usado la posición absoluta en la Vista principal, pero dentro de esa Vista la dirección flexible y justificar el espacio de contenido entre no funciona, ¿por qué? ¿Flexbox y el posicionamiento absoluto no funcionan juntos?

Código:

<View style={styles.cardContent}>
        <View style={{maxWidth: 175}}>
          <Text
            style={{
              fontSize: 16,
              fontWeight: '700',
              padding: 10,
              color: 'white',
            }}>
            {hotelName}
          </Text>
        </View>
        <View style={{flexDirection: 'column', marginLeft: 75}}>
          <Text
            style={{
              fontSize: 20,
              fontWeight: '700',
              padding: 5,
              textAlign: 'right',
              color: 'white',
            }}>
            &#8377; {newRate}
          </Text>
          <Text
            style={{
              fontSize: 16,
              fontWeight: '700',
              textAlign: 'right',
              color: 'white',
              textDecorationLine: 'line-through',
              textDecorationStyle: 'solid',
            }}>
            &#x20b9; {oldRate}
          </Text>
        </View>
      </View>

Css:

 cardContent: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },

Para cardContent no puedo eliminar la posición absoluta y la propiedad inferior 0 porque quiero arreglar la tarjeta en la parte inferior de la pantalla.

En la captura de pantalla siguiente, puede ver que el nombre del hotel está presente en el extremo izquierdo, pero newRate y oldRate no van en el extremo derecho incluso después de usar flexDirection: 'row' y justify content: space between

Captura de pantalla:

enter image description here

0
rock stone 4 oct. 2019 a las 08:52

3 respuestas

La mejor respuesta

Puedes probar esto

cardContent: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor:'red',
    width:'100%' // add width 
  },
1
Nagesh 4 oct. 2019 a las 06:03

Simplemente agregaría width: Dimensions.get('window').width al estilo cardContent en lugar de width: 100%.

Dado que 100% significa que desea que este elemento se ajuste al 100% de su ancho principal y Dimensions.get('window').width significa que desea el ancho de la ventana gráfica (dispositivo).

0
Rafael Câmara 4 oct. 2019 a las 12:06

Agregue un width: '100%' a sus cardContent estilos de componentes.

1
Limitless Claver 4 oct. 2019 a las 06:12