5

我有一个要放在 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 组件以显示作业列表。这是我发现错误的地方，也是我开始尝试调试问题的地方。在我的项目中，我有View一个风格为的父母，其中包含...{flex: 1的孩子来自ListFlatListListreact-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 })
        }
    />
);
};
4

3 回答 3

6

我能够解决这个问题。

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

于 2018-03-14T13:07:58.877 回答
3

我很困惑-您使用的是aFlatList还是ScrollViewa-这两个元素具有完全不同的生命周期事件（aFlatList要求您定义各个行的呈现方式及其键，而aScrollView期望子项与组件内联呈现）。

无论如何，我认为问题出在您的结构中，听起来该List元素也需要一个高度属性（{flex: 1}），因为绝对父级正在填充它的空间，但该List组件没有预定义的高度。

于 2017-05-30T05:15:24.140 回答
0

因此，今天调试了更多之后，我最终创建了一个全新的 Expo 项目并将我所有的源代码复制/粘贴到新项目中，将我的 Github 项目名称更改为新名称，并将远程源设置为我的 github我的新本地项目上的 repo（我更改名称的那个）。

由于某种原因，世博会项目似乎存在问题。当我试图将新项目的名称更改为原始项目的名称时，几乎看起来NAME项目的实际情况正在引起问题，但它没有用。它仅在进行全新项目时才有效，但使用完全相同的源代码。

于 2017-05-31T03:20:42.943 回答