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:
4 Réponses :
Utilisez flexGrow: 1 dans votre styles.scroll au lieu de flex:1
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 (
Cela ne fonctionne pas vraiment pour moi. Pourriez-vous jeter un oeil ici s'il vous plaît? stackoverflow.com/questions/63437251/…
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.
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'}}
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.
Cela ne fonctionne pas vraiment pour moi. Pourriez-vous jeter un oeil ici s'il vous plaît? stackoverflow.com/questions/63437251/…
utilisez flex: 1 dans style = {styles.container} et supprimez-le de .scroll
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/…