en mi aplicación nativa de reacción, tengo una vista de desplazamiento donde los elementos de mi lista están envueltos en filas (flexDirection: 'row', flexWrap: 'wrap'), sin embargo, debido a esto, mi vista de desplazamiento no se desplazará por alguna razón ...
Mi vista de desplazamiento:
<View style={{flex:1}}> <ScrollView vertical={true} contentContainerStyle={{ borderWidth:1,flex:1,flexDirection:'row',flexWrap:'wrap',alignItems: 'flex-start'}}> {root.userStore.passionOptions.map((item,index) => {return ( <Text key={item} onPress={ ()=>{ Alert.alert('kaka') } } style={{ fontSize:18,padding:5,paddingLeft:10,paddingRight:10,color:'rgb(125,125,125)',borderRadius:35,borderWidth:1,borderColor:'rgba(0,0,0,0.1)',margin:5 }}>{item}</Text> ) })} </ScrollView> </View>EDITAR: Intenté eliminar las propiedades flexWrap y flexDirection y tampoco se desplazará
Razón para no trabajar:
Tu flexDirection está en conflicto con ScrollDirection.
Solución:
Entonces, para evitar conflictos, puede tener otra Vista dentro de ScrollView y hacer la lógica flexWrap
<ScrollView> <View style={{ borderWidth:1, flex:1, flexDirection:'row', flexWrap:'wrap', alignItems: 'flex-start' }} > ...Your Views over here... </View> </ScrollView>A mí me funciona así. Hice scrollView como componente externo.
<ScrollView> <View lightColor="#eee" style={{ paddingHorizontal: 7, paddingVertical: 5 }} > {children} </View> </ScrollView>