反应本机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}}>
The Solution is to use flatlist component <View style={{flex:1}}>
after renderRow return component <View style={{flex:1}}>
这篇关于反应本机ScrollView/FlatList不滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!