React Native ScrollView/FlatList 不滚动 [英] React Native ScrollView/FlatList not scrolling

问题描述

我有一个要放在 FlatList(即 ScrollView)中的数据列表，每当我尝试向下滚动以查看更多列表时，ScrollView 就会弹回列表顶部，所以我不能见过列表的底部.

I have a list of data that I want to place inside a FlatList (i.e. ScrollView) and whenever I try to scroll down to view more of the list, the ScrollView just bounces back up to the top of the list so I cannot ever see the bottom of the list.

我正在使用 Expo，但奇怪的是，如果我只是创建一个新项目或将一些代码复制/粘贴到 Snack 中，那么滚动就可以了.仅在我当前的项目中，我无法滚动列表.我什至进入了 main.js 文件并将我的示例代码粘贴在那里，问题仍然存在.

I am using Expo and the strange thing is that if I just create a new project or copy/paste some code into Snack then the scrolling works just fine. It is only in my current project that I cannot get the list to scroll. I have even gone into the main.js file and just pasted my example code in there and the issue still persists.

我的示例代码位于此处:https://snack.expo.io/ryDPtO5-b我已将此确切代码粘贴到我的项目中，但它没有按预期工作.

My example code is located here: https://snack.expo.io/ryDPtO5-b I have pasted this exact code into my project and it is not working as expected.

版本:RN 0.44/世博 SDK 17.0.0/反应:16.0.0-alpha.6

Versions: RN 0.44 / Expo SDK 17.0.0 / React: 16.0.0-alpha.6

我的项目的实际用例包括在屏幕底部三分之一处放置一个 FlatList 组件以显示作业列表.这是我发现错误的地方，也是我开始尝试调试问题的地方.在我的项目中，我有一个父 View，其样式为 {flex: 1，其子 List 包含 FlatList... List 来自 react-native-elements

My actual use case for my project involves placing a FlatList component at the bottom-third of the screen to show a list of jobs. This is where I discovered the error and when I started to try and debug the issue. In my project I have a parent View with a style of {flex: 1 with a child of List that contains the FlatList... List comes from react-native-elements

编辑

这是我实际尝试使用的代码:

Here is the code I am actually trying to use:

 <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 函数:

and lastly, my renderItem function:

 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 })
        }
    />
);
};

推荐答案

我能够解决这个问题.

解决方法是在renderRow返回组件<View style={{flex:1}}之后使用flatlist组件<View style={{flex:1}}>>

The Solution is to use flatlist component <View style={{flex:1}}> after renderRow return component <View style={{flex:1}}>

这篇关于React Native ScrollView/FlatList 不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！