web-dev-qa-db-fra.com

ScrollView avec flex 1 le rend non-scrollable

J'essaie d'exécuter flex sur une ScrollView et tant que le ScrollView a flex: 1 le scroll à l'intérieur ne fonctionne pas. voici le violon expo (avec lequel vous pouvez exécuter ce code et jouer avec) https://snack.expo.io/SySerKNp-

notez que si vous supprimez le flex: 1 de la ScrollView, il laisse défiler, mais vous perdez le pouvoir de flexion (possibilité de laisser le conteneur rouge descendre pour pousser la boîte supérieure (la ScrollView)), de sorte que je dois y avoir un flex.

p.s - Je ne travaille que sur Android et je ne l'ai pas testé sur iPhone (le résultat ne me dérange pas)

aucune idée de ce qui me manque? pourquoi la ScrollView ne fonctionnera-t-elle pas correctement avec un flex: 1? merci!

react-nativeflexboxreact-native-androidreact-native-scrollview
13
Danny

Je crois que votre problème est que vous indiquez à ScrollView d’occuper tout l’espace disponible avec flex = 1, mais le fait est que ScrollView fonctionne différemment. Il rend automatiquement tous ses enfants, donc il fonctionne différemment avec flex. C'est la différence par rapport à une ListView ou à une FlatList normale qui offre de meilleures performances. 

Je crois que cette collation résout ce problème: https://snack.expo.io/SkxN9GOT-

En gros, je prends la hauteur de l'appareil et configure ScrollView avec une hauteur fixe, basée sur (screenHeight - la hauteur actuelle de la zone rouge). 

7
sfratini

Essayez d’utiliser flexGrow: 1 au lieu de flex: 1 dans le style de conteneur de contenu scrollView comme suit.

<ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: 'green', borderWidth: 5 }}>
  <View style={styles.box1} />
  <View style={styles.box2} />
  <View style={styles.box1} />
</ScrollView>

https://snack.expo.io/HkkEVoh6Z

12
Ankit Aggarwal

La meilleure chose à faire est de placer votre ScrollView dans une vue et de contrôler cette vue avec flex, votre vue de défilement suivra.

Ceci est un petit exemple

<View style={{flex: 1, flexDirection: 'column',}}>

          <View style={{flex:5, backgroundColor : 'green' }}>
            <ScrollView style={{margin:50, backgroundColor : 'pink' }}>

              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>

            </ScrollView>
          </View>

          <View style={{flex:1, backgroundColor : 'blue' }}>
              <Text> Hello Static View </Text>
          </View>

</View>
0
Sabba Keynejad

Cette réponse a déjà été fournie comment le faire.

Mais voici une explication pourquoi vous ne pouvez pas le faire par votre méthode. Les styles donnés dans contentContainerStyle est

appliqué au conteneur de contenu de vue de défilement qui englobe toutes les vues enfants.

Ainsi, lorsque vous appliquez flex: 1 à contentContainer, il prend toute la hauteur de ScrollView dont la hauteur est également flex: 1 en tant que parent View.

Vous pouvez également simuler -

la possibilité de laisser le conteneur rouge descendre pour pousser la boîte supérieure

en ajoutant un parent à ScrollView et en appliquant un style dans le parent

<View style={styles.root}>
  <View style={{ flex: 1, borderColor: 'green', borderWidth: 5 }}>
    <ScrollView>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box1} />
    </ScrollView>
  </View>
  <View style={{ height: this.state.height, backgroundColor: 'red' }}>
    <TouchableOpacity onPress={() => this.setState({ height: this.state.height + 10 })}>
      <Text>Click</Text>
    </TouchableOpacity>
  </View>
</View>
0
Shovon

Essayez de remplacer contentContainerStyle par style. Je crois que c'est ce que vous attendez: https://snack.expo.io/S1CVrJYa-

0
Alexey Kureev

Essayez celui-ci il va 100% résoudre votre problème

import React, { Component } from 'react';
import { AppRegistry, View,ScrollView } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{ flex: 1,flexDirection: 'column' }}>
        <View style={{   height: 50, backgroundColor: 'powderblue'}} />
        <View style={{  flex: 1,  backgroundColor: 'skyblue'}} >
            <ScrollView>

<View style={{  flexDirection: 'column' , minHeight: 'fit-content'}} >
 <View style={{    height:150, backgroundColor: 'red'}} />
    <View style={{ minHeight: 'fit-content', backgroundColor: '#fe3222' }} />      

 <View style={{    height:150, backgroundColor: '#fff222'}} />
    <View style={{    height:150, backgroundColor: '#555222'}} />           
              </View>

  </ScrollView>
 </View>
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
0
user3809729