我有一个数据列表,我想将其放入 FlatList(即 ScrollView)中,每当我尝试向下滚动以查看列表的更多内容时,ScrollView 就会弹回到列表顶部,因此我永远看不到列表底部。
我正在使用 Expo,奇怪的是,如果我只是创建一个新项目或将一些代码复制/粘贴到 Snack 中,那么滚动就可以正常工作。仅在我当前的项目中,我无法滚动列表。我什至已经进入main.js
文件并刚刚将我的示例代码粘贴到其中,问题仍然存在。
我的示例代码位于此处:https://snack.expo.io/ryDPtO5-b https://snack.expo.io/ryDPtO5-b我已将这段确切的代码粘贴到我的项目中,但它没有按预期工作。
版本:
RN 0.44 /
世博SDK 17.0.0 /
反应:16.0.0-alpha.6
我的项目的实际用例包括将 FlatList 组件放置在屏幕的底部三分之一处以显示作业列表。这是我发现错误并开始尝试调试问题的地方。在我的项目中,我有一个父母View
风格为{flex: 1
和一个孩子List
其中包含FlatList
... List
来自react-native-elements
EDIT
这是我实际尝试使用的代码:
<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 })
}
/>
);
};