反應原生ScrollView / FlatList不滾動

Question

我有一個要放入FlatList（即ScrollView）中的數據列表，每當我嘗試向下滾動以查看更多列表時，ScrollView就會彈回到列表的頂部，所以我看不到列表的底部。

我正在使用Expo，奇怪的是，如果我只是創建一個新項目或將某些代碼復制/粘貼到Snack中，那么滾動就可以了。 僅在我當前的項目中，我無法滾動列表。 我什至進入main.js文件，然后將示例代碼粘貼到該文件中，問題仍然存在。

我的示例代碼位於： https : //snack.expo.io/ryDPtO5-b我已將此確切代碼粘貼到我的項目中，並且無法按預期工作。

版本：RN 0.44 / Expo SDK 17.0.0 / React：16.0.0-alpha.6

我的項目實際用例是在屏幕的底部三分之一處放置一個FlatList組件，以顯示作業列表。 這是我發現錯誤的地方以及開始嘗試調試問題的地方。 在我的項目中，我有一個樣式為{flex: 1的父View ，其子List包含FlatList ...。該List來自react-native-elements

編輯

這是我實際上試圖使用的代碼：

 <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>;

還有我所有的風格

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

最后，我的renderItem函數：

 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

我能夠解決這個問題。

解決方案是在renderRow返回組件<View style={{flex:1}}>之后使用平面列表組件<View style={{flex:1}}>

Answer 2

我很困惑-您使用的是FlatList還是ScrollView這兩個元素具有完全不同的生命周期事件（ FlatList要求您定義單個行的呈現方式及其鍵，而ScrollView希望子級與組件內聯呈現）。

無論如何，我認為問題出在您的結構中，聽起來像List元素也需要height屬性（ {flex: 1} ），因為絕對父級正在填充它的空間，但是List組件沒有預定義高度。

Answer 3

因此，在今天進行了更多調試之后，我最終創建了一個全新的Expo項目並將所有源代碼復制/粘貼到新項目中，將我的Github項目名稱更改為新名稱，並將遠程源設置為github在新的本地項目上進行回購（更改名稱的地方）。

由於某種原因，世博項目似乎出現了問題。 當我嘗試將NEW項目的名稱更改為原始項目的NAME ，該項目的實際NAME似乎引起了問題，但是沒有用。 它僅在執行全新項目時起作用，但使用完全相同的源代碼。