Reactive Native ScrollView/FlatList nicht scrollen

Question

Ich habe eine Liste von Daten, die ich in einer FlatList (dh ScrollView) platzieren möchte und wann immer ich scrolle, um mehr von der Liste zu sehen, springt die ScrollView einfach zurück zum ganz oben in der Liste, damit ich nie den unteren Teil der Liste sehen kann.

Ich benutze Expo und die seltsame Sache ist, dass, wenn ich nur ein neues Projekt erstellen oder Code in Snack kopieren/einfügen dann das Scrollen funktioniert gut. Nur in meinem aktuellen Projekt kann ich die Liste nicht zum Scrollen bringen. Ich bin sogar in die Datei main.js gegangen und habe dort meinen Beispielcode eingefügt und das Problem besteht immer noch.

Mein Beispiel Code befindet sich hier: https://snack.expo.io/ryDPtO5-b Ich habe diesen genauen Code in mein Projekt eingefügt und es funktioniert nicht wie erwartet.

Versionen: RN 0.44/ Expo SDK 17.0.0/ Reagieren: 16.0.0-alpha.6

Mein konkreter Anwendungsfall für mein Projekt beinhaltet im unteren Drittel der eine FlatList Komponente platzieren Bildschirm, um eine Liste von Jobs anzuzeigen. Dies ist, wo ich den Fehler entdeckte und als ich anfing, das Problem zu debuggen und zu versuchen. In meinem Projekt habe ich einen Elternteil View mit einem Stil von {flex: 1 mit einem Kind von List, den die FlatList enthält ... List kommt aus react-native-elements

EDIT

Hier ist der Code, den ich tatsächlich versucht ist zu verwenden :

<View style={styles.container}> 
<View style={containerStyles.headerContainerStyle}> 
     <Text style={[textStyles.h2, { textAlign: 'center' }]}> 
      Territory: {this.props.currentTerritory} 
     </Text> 
</View> 
<View style={styles.mapContainer}> 
    <MapView 
    provider="google" 
    onRegionChangeComplete={this.onRegionChangeComplete} 
    region={this.state.region} 
    style={{ flex: 1 }} 
    > 
    {this.renderMapMarkers()} 
    </MapView> 
</View> 
    <Badge containerStyle={styles.badgeStyle}> 
     <Text>Orders Remaining: {this.props.jobsList.length}</Text> 
    </Badge> 
<List containerStyle={{ flex: 1 }}> 
    <FlatList 
    data={this.props.jobsList} 
    keyExtractor={item => item.id} 
    renderItem={this.renderJobs} 
    removeClippedSubviews={false} 
    /> 
</List> 
</View> 

Und alle meine Arten

const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
}, 
mapContainer: { 
    height: 300, 
}, 
badgeStyle: { 
    backgroundColor: 'green', 
    alignSelf: 'center', 
    marginTop: 15, 
    width: 300, 
    height: 35, 
}, 

});

und schließlich meine renderItem Funktion:

renderJobs = ({ item }) => { 
const { fullAddress, pickupTime } = item; 

return (
    <ListItem 
     containerStyle={item.status === 'active' && { backgroundColor: '#7fbf7f' }} 
     title={fullAddress} 
     titleStyle={{ fontSize: 14 }} 
     subtitle={pickupTime} 
     subtitleStyle={{ fontSize: 12, color: 'black' }} 
     onPress={() => this.props.navigation.navigate('jobActions', { job: item })} 
    /> 
); 

}

Answer 1

Ich bin verwirrt - sind Sie ein FlatList oder eine ScrollView mit - diese beiden Elemente ganz andere Lebensereignisse haben (a FlatList erfordert, dass Sie definieren, wie einzelne Zeilen gerendert werden und ihre Schlüssel, während ScrollView erwartet, dass die untergeordneten Elemente inline mit der Komponente gerendert werden.

Egal, ich denke, das Problem in Ihrer Struktur ist, klingt es wie das List Element eine Höhe als auch ({flex: 1}) als absolut Eltern Attribut erfordert ist Raum, es ist Füllung, aber die List Komponente ist nicht mit einem vordefinierten Höhe.

Answer 2

Also nach dem Debuggen dieses ein bisschen mehr heute und ich am Ende nur ein brandneues Expo-Projekt erstellen und kopieren Sie alle meine Quellcode in das neue Projekt, Ändern Sie meinen Github-Projektnamen auf den neuen Namen, und stellen Sie die Fernbedienung Ursprung zu meinem GitHub Repo (der, wo ich den Namen änderte) auf meinem neuen lokalen Projekt.

Aus irgendeinem Grund gab es ein Problem mit dem Expo-Projekt. Es schien fast so, als ob die tatsächliche NAME des Projekts Probleme verursachte, als ich versuchte, den Namen des NEUEN Projekts in das des ursprünglichen Projekts zu ändern, aber es hat nicht funktioniert.Es funktionierte nur, wenn ein brandneues Projekt durchgeführt wurde, aber der exakt gleiche Quellcode verwendet wurde.