wake-up-neo.net

ScrollView mit Flex 1 macht es nicht scrollbar

Ich versuche, flex auf einem ScrollView auszuführen, und solange die ScrollView flex: 1 hat, funktioniert der scroll in nicht. Hier ist die Expo-Geige (mit der Sie diesen Code ausführen und damit spielen können) https://snack.expo.io/SySerKNp-

wenn Sie flex: 1 aus dem ScrollView entfernen, wird das Scrollen zwar nicht ausgeführt, aber Sie verlieren die Flexkraft (die Fähigkeit, den roten Container nach unten zu drücken.

p.s - Ich arbeite nur mit Android und habe es nicht auf dem iPhone getestet (ich habe nichts dagegen)

irgendeine ahnung was fehlt mir? Warum funktioniert ScrollView nicht richtig, wenn es einen flex: 1 hat? Danke!

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

Ich glaube, Ihr Problem ist, dass Sie dem ScrollView sagen, dass es mit flex = 1 den gesamten verfügbaren Speicherplatz belegen soll. ScrollView funktioniert jedoch anders. Alle untergeordneten Elemente werden automatisch gerendert, sodass sie mit flex anders funktionieren. Das ist der Unterschied zu einer normalen ListView oder FlatList, die eine bessere Leistung aufweist. 

Ich glaube, dieser Snack löst dieses Problem: https://snack.expo.io/SkxN9GOT-

Grundsätzlich erhalte ich die Höhe des Geräts und setze die ScrollView auf eine feste Höhe, basierend auf (screenHeight - die aktuelle Höhe der roten Box). 

7
sfratini

Versuchen Sie es mit flexGrow: 1 anstelle von flex: 1 im Inhalt des Scroll-Container wie folgt.

<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

Das Beste, was Sie tun können, ist, Ihre ScrollView in eine Ansicht zu packen und diese Ansicht mit Flex zu steuern.

Dies ist ein kleines Beispiel

<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

Diese Antwort wurde bereits zur Verfügung gestellt.

Aber hier ist eine Erklärung, warum Sie Ihre Methode nicht verwenden können. Die in contentContainerStyle angegebenen Stile sind

wird auf den Inhaltscontainer für die Bildlaufansicht angewendet, der alle untergeordneten Ansichten einschließt.

Wenn Sie also flex: 1 auf contentContainer anwenden, wird die volle Höhe von ScrollView verwendet, deren Höhe ebenfalls flex: 1 als übergeordnete View ist.

Sie können auch simulieren -

die Fähigkeit, den roten Behälter herunterzulassen, um den oberen Kasten nach oben zu drücken

durch Hinzufügen eines übergeordneten Elements zu ScrollView und Anwenden des Stils im übergeordneten Element

<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

Versuchen Sie, contentContainerStyle durch style zu ersetzen. Ich glaube, das erwarten Sie: https://snack.expo.io/S1CVrJYa-

0
Alexey Kureev

Probieren Sie es aus, es wird Ihr Problem zu 100% lösen

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