React Native ScrollView/FlatList不滚动

问题描述：

我有一个我想要放置在FlatList（即ScrollView）中的数据列表，并且每当我尝试向下滚动以查看更多列表时，ScrollView都会跳回到列表的顶部，所以我永远不会看到列表的底部。React Native ScrollView/FlatList不滚动

我正在使用世博会和奇怪的是，如果我只是创建一个新项目或复制/粘贴一些代码到Snack中，那么滚动工作就好了。只有在我目前的项目中，我无法滚动列表。我甚至进入了main.js文件，并在那里粘贴了我的示例代码，问题仍然存在。

我的示例代码位于：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

编辑

这里是我真正想使用的代码：

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

}

不要提供外部链接到您的代码。创建一个MCVE代替：https：//*.com/help/mcve – CinCout

答

我很困惑 - 你使用FlatList或ScrollView - 这两种元素具有完全不同的生命周期事件（一个FlatList需要你定义单个行将如何呈现以及它们的键，而ScrollView预计子组件与内联呈现）。

无论如何，我认为这个问题是在你的结构，它听起来就像是List元素需要的绝对父的高度属性以及（{flex: 1}）是填补它的空间，但List组件是不是有一个预先定义的高度。

我在我的问题中添加了一些代码，以帮助澄清... 我想使用FlatList组件，但它不工作，所以我试图在我的应用中测试一个常规的'ScrollView'，但它也不起作用。我添加了'{flex：1}'到列表组件，但是这并没有解决问题... – cruz02148

从'react-native-elements'阅读'List' - 它本身就是FlatList '，而不是包装组件。要么删除'List'并使用'FlatList'，要么使用'List'设计用于的底层'ListItem'组件。 –

所以我尝试了两种解决方案。我完全删除了'FlatList'，只是使用'List'，然后映射到数据集上，为数据集中的每个项目返回一个'ListItem'。然后，我尝试着使用'FlatList'组件，但没有父'List'，只是渲染了一堆'Text'组件，但仍然出现错误。第一次实施此解决方案时，我使用此博客作为我的指南：https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6 我在一个新项目中工作得很好，但不是我现有的... – cruz02148

答

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

出于某种原因，世博会项目似乎存在问题。几乎看起来像项目的实际NAME正在引发问题，因为我试图将NEW项目的名称更改为原始项目的名称，但它不起作用。它只在做一个全新的项目时有效，但使用完全相同的源代码。

React Native ScrollView/FlatList不滚动

相关推荐