2
votes

ScrollView ne défile pas sur Android

Quelqu'un peut-il m'aider à comprendre pourquoi mon scrollView ne fonctionne que sur iOS et non sur Android? J'utilise React Native, ce problème s'est déjà produit mais il a été résolu en supprimant la valeur flex des conteneurs mais cette fois je ne peux pas vraiment le résoudre Toute votre aide est vraiment appréciée!

   const styles = StyleSheet.create({
        container: {
        backgroundColor: '#28243c',
        flex:1,
        paddingBottom: (Platform.OS == 'android' ? 20 : 0)
      },       
      userStatsContainer: {
        paddingTop: 10,
        flexDirection: 'row',
        justifyContent: 'center'
      },
      userStatsItem: {
        flexDirection: 'row',
        paddingRight: 10,
        alignSelf: 'center'
      },
      standAloneUserStatsItem : {
        flexDirection: 'row',
        paddingTop: 10,
        alignSelf: 'center'
      },
      userStatsTitle: {
        alignSelf:'center',
        color: 'white',
        paddingLeft: 5,
        fontFamily: 'SF-medium'
      },
      title: {
        color: '#f7c66c',
        fontFamily: 'SF-bold',
        fontSize: 20,
        paddingTop: 30,
        alignSelf: 'center'
      },
      informationBox: {
        marginTop: 10,
        backgroundColor: '#41436c',
        width: '80%',
        alignSelf: 'center'
      },
      informationRow: {
        padding:10,
        flexDirection: 'row'
      },
      reviewText: {
        color: 'white',
        fontFamily: 'SF-medium',
        flex: 1
      },
    });

et voici les styles utilisés pour cet écran spécifique

  render() {
    return (
        <View style={styles.container}>

            <ScrollView showsVerticalScrollIndicator={false}>
                <Text style={styles.title}>REVIEWS 2</Text>
                <View style={styles.informationBox}>
                  <View style={styles.informationRow}>
                    <Text style={styles.reviewText}>Traveler Rating</Text>
                    <Rating type="custom" style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={3}
                      ratingBackgroundColor= "#e9e9f1" ratingColor="#f7c66c"/>
                  </View>
                  <View style={styles.divider}></View>
                  <View style={styles.informationRow}>
                  <Text style={styles.reviewText}>Shipper Rating</Text>
                  <Rating type="custom" style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={0}
                    ratingBackgroundColor= "#e9e9f1" ratingColor="#f7c66c"/>
                  </View>
                </View>
            </ScrollView>
            </View>
        </View>
    );
  }
}

javascript android react-native

1 commentaires

N'avez-vous pas une vue supplémentaire après la vue par défilement? Je vois une balise de fermeture sans vue

3 Réponses :

0
votes

ScrollView ne peut avoir qu'un seul enfant. Quelque chose comme un LinearLayout ou ContraintLayout qui encapsule ensuite le contenu réel.

0 commentaires

0
votes

ajoutez flex: 1 à votre ScrollView, et tant que les données sont suffisamment longues, vous devriez pouvoir faire défiler. J'ai utilisé vos codes pour la collation ci-dessous,

https://snack.expo.io/@spacechimp/petrified-waffles

0 commentaires

0
votes

Cela fonctionne sur les deux:

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.informationBox}>
            <Text style={styles.title}>REVIEWS 2</Text>
            <View style={styles.informationRow}>
              <Text style={styles.reviewText}>Traveler Rating</Text>
              <View style={styles.ratingView} />
            </View>
            <View style={styles.divider} />
            <View style={styles.informationRow}>
              <Text style={styles.reviewText}>Shipper Rating</Text>
              <View style={styles.ratingView} />
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#28243c',
    flex: 1,
    paddingBottom: Platform.OS == 'android' ? 20 : 0
  },
  userStatsContainer: {
    paddingTop: 10,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  userStatsItem: {
    flexDirection: 'row',
    paddingRight: 10,
    alignSelf: 'center'
  },
  standAloneUserStatsItem: {
    flexDirection: 'row',
    paddingTop: 10,
    alignSelf: 'center'
  },
  userStatsTitle: {
    alignSelf: 'center',
    color: 'white',
    paddingLeft: 5
  },
  title: {
    color: '#f7c66c',
    fontSize: 20,
    paddingTop: 30,
    alignSelf: 'center'
  },
  informationBox: {
    marginTop: 10,
    backgroundColor: '#41436c',
    width: '80%',
    alignSelf: 'center'
  },
  informationRow: {
    padding: 10,
    flexDirection: 'row'
  },
  reviewText: {
    color: 'white',
    flex: 1
  },
  ratingView: {
    width: 100,
    height: 300,
    backgroundColor: 'red'
  }
});

0 commentaires