7
votes

réagir à la vue de défilement native ne défilant pas sur Android

J'ai le composant suivant:

import { StyleSheet, Dimensions, } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  scroll: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  image: {
    width: Dimensions.get('window').width,
    height: 350,
  },
  box: {
    width: Dimensions.get('window').width - 30,
    position: 'absolute',
    shadowColor: '#000000',
    shadowOpacity: 0.34,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 10
    },
    elevation: 10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderColor: 'lightgrey',
    backgroundColor: '#ffffff',
    padding: 10,
    marginTop: 410,

  },
  boxDiscount: {
    width: Dimensions.get('window').width - 30,
    position: 'absolute',
    shadowColor: '#000000',
    shadowOpacity: 0.34,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 10
    },
    elevation: 10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderColor: 'lightgrey',
    backgroundColor: '#253241',
    padding: 10,
    marginTop: 320,
  },
  title: {
    fontSize: 30
  },
  distance: {
    fontSize: 20,
    color: '#767676'
  },
  distanceElement: {
    fontSize: 20,
    color: '#44D9E6'
  },
  address: {
    fontSize: 20,
    color: '#767676'
  },
  category: {
    fontSize: 20,
    color: '#767676',
  },
  categoryElement: {
    fontSize: 20,
    color: '#44D9E6',
  },
  hr: {
    borderBottomColor: 'lightgrey',
    borderBottomWidth: 1,
  },
  icons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  }
});

export default styles;

avec ce style

export default class StoreComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView contentContainerStyle={styles.scroll}>
          <StoreCarouselComponent />
          <StoreDiscountComponent />
          <StoreDetailsComponent />
        </ScrollView>
      </View>
    );
  }
}

mon scrollview fonctionne sur iOS mais pas sur Android et Je ne comprends pas pourquoi

voici une image de l'application et comme vous pouvez le voir, j'ai besoin de faire défiler sur Android:

 entrez la description de l'image ici


0 commentaires

4 Réponses :


11
votes

Utilisez flexGrow: 1 dans votre styles.scroll au lieu de flex:1


2 commentaires

si vous pouvez changer le schéma (permutez le ScrollView avec la vue). utilisez ceci: `` Exporter la classe par défaut StoreComponent étend Component {render () {return ( ); }} `` `` si cela ne fonctionne pas, pouvez-vous s'il vous plaît ajouter des accessoires nestedScrollEnabled = {true} à votre Scrollview?


Cela ne fonctionne pas vraiment pour moi. Pourriez-vous jeter un oeil ici s'il vous plaît? stackoverflow.com/questions/63437251/…



2
votes

les styles sur votre contenu de défilementContainerStyle est impeccable.

essayez de supprimer: styles.scroll

et donnez simplement un remplissage ou une marge sur le composant si vous le centrez

si sa ligne ajoute des accessoires horizontal = true sur ScrollView.


2 commentaires

merci, mais sans le style, mon contenu est orienté vers la gauche, il faut également faire défiler verticalement non horizontalement.


si vous ne souhaitez pas modifier la marge / le remplissage de vos composants enfants. une autre option est de l'ajouter à votre ScrollView contentContainerStyle = {{width: '100%', alignItems: 'center'}}



3
votes

J'ai eu un problème similaire. Le coupable s'est avéré être contentContainerStyle = {{flex: 1}} sur mon ScrollView. La suppression de cela (cela s'est avéré inutile, de toute façon.) A résolu le problème sur Android.


1 commentaires

Cela ne fonctionne pas vraiment pour moi. Pourriez-vous jeter un oeil ici s'il vous plaît? stackoverflow.com/questions/63437251/…



4
votes

utilisez flex: 1 dans style = {styles.container} et supprimez-le de .scroll


2 commentaires

Je vous remercie. J'ai résolu mon problème


Cela ne fonctionne pas vraiment pour moi. Pourriez-vous jeter un oeil ici s'il vous plaît? stackoverflow.com/questions/63437251/…