Minha intenção é ter linhas com dois itens, e estes itens devem ter uma largura de acordo com o tamanho da tela, ou seja, tela de 500 , calculo 500/2 - espaços
.
Seria algo parecido com isso.
Meu código:
const columns = 2;
const margin = vw(1);
const spacing = (columns + 1) / columns * margin;
function vw(percentageWidth) {
return Dimensions.get('window').width * (percentageWidth / 100);
}
export default class SearchPesquisa extends Component {
cards () {
return this.props.produtos.map((item, indice) => {
return(
<View key={i} style={styles.cell}>
<Card>
<CardItem style={{ height: 280, borderRadius: 4 }}>
</CardItem>
</Card>
</View>
)
})
}
render() {
return (
<View style={styles.container}>
<ScrollView>
{ this.cards() }
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start'
},
cell: {
width: vw(100) / columns - spacing
}
});
Explicando:
flexDirection:'row'
direção de exibição dos meus itens.columns
número de colunas a ser exibido.vw
calculo de porcentagem da margen, no exemplovw(1)
será 1 porcentospacing
apenas um espaço.
Meu exemplo: ViewPort: ~411, Margin: ~4.11, Spacing: ~6.17, WidCard:199.54
Problema: Cada card está ficando em um linha.