Los elementos de Vista múltiple con imagen dentro deben mostrarse en un diseño de dos columnas.

Estoy usando el siguiente código (básicamente, obteniendo la dimensión (x) de la ventana y configurando View width = x / 2).

El contenedor principal es flex: row.

Pero esto no parece estar funcionando. Solo obtengo una imagen en una fila en lugar de dos como se muestra en la imagen. ¿Que estoy haciendo mal?

const window = Dimensions.get('window');
const imageWidth = (window.width/3)+30;
const imageHeight = window.width/3;
export default class Brochures extends Component {
  render() {
    const brochuresView = brochuresData.map( Brochure );
    return (
      <ScrollView style={styles.container}>
        {brochuresView}
      </ScrollView>
    );
  }
}

const Brochure = ( data ) => {
  const {child, image} = styles;
  return (
    <View key={data.id} style={child}>
      <Image
        style={image}
        source={{uri: data.url}}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  child: {
    width: window.width/2,
    alignItems: 'center',
    height: imageHeight+5,
    marginTop: 10
  },
  image: {
    width: imageWidth,
    height: imageHeight
  }
});

Wrong layout

4
john doe 19 ene. 2017 a las 17:15

2 respuestas

La mejor respuesta

ScrollView toma un accesorio contentContainerStyle frente al accesorio style normal que describirá el estilo.

De los documentos:

Estos estilos se aplicarán al contenedor de contenido de la vista de desplazamiento que envuelve todas las vistas secundarias. Ejemplo:

return ( <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView> ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } });

Entonces, básicamente, el único cambio que necesitará con su código será este:

<ScrollView contentContainerStyle={styles.container}>

Vs esto:

<ScrollView style={styles.container}>
7
Nader Dabit 19 ene. 2017 a las 14:48

Prueba esto:

const window = Dimensions.get('window');
const imageWidth = (window.width/3)+30;
const imageHeight = window.width/3;
export default class Brochures extends Component {
  render() {
    const brochuresView = brochuresData;
    var brochuresRow = [];
    var set = [];
    var setCounter = 0;

    for(var i = 0; i < brochuresView.length; i++) {
        set.push(brochuresView[i]);
        if((i + 1) % 2 == 0 || (i + 1) >= brochuresView.length) {
            setCounter++;
            brochuresRow.push(set);
            set = [];
        }
    }

    return (
      <ScrollView>
        {brochuresRow.map((row, i) => (
            <View key={i} style={styles.container}>
                {row.map((brochure, ii) => (
                    <View key={ii} style={styles.child}>
                        <Image
                            style={styles.image}
                            source={{uri: brochure.url}}
                        />
                    </View>
                ))}
            </View>
        ))}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center'
  },
  child: {
    height: imageHeight+5,
    marginTop: 10
  },
  image: {
    width: imageWidth,
    height: imageHeight
  }
});
0
aimadnet 19 ene. 2017 a las 15:07