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

}

來源

2017-05-30 cruz02148

不要提供外部鏈接到您的代碼。創建一個MCVE代替：https：//stackoverflow.com/help/mcve – CinCout

我很困惑 - 你使用FlatList或ScrollView - 這兩種元素具有完全不同的生命週期事件（一個FlatList需要你定義單個行將如何呈現以及它們的鍵，而ScrollView預計子組件與內聯呈現）。

無論如何，我認爲這個問題是在你的結構，它聽起來就像是List元素需要的絕對父的高度屬性以及（{flex: 1}）是填補它的空間，但List組件是不是有一個預先定義的高度。

來源

2017-05-30 05:15:24

我在我的問題中添加了一些代碼，以幫助澄清... 我想使用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項目的名稱更改爲原始項目的名稱，但它不起作用。它只在做一個全新的項目時有效，但使用完全相同的源代碼。

來源

2017-05-31 03:20:42 cruz02148

React Native ScrollView/FlatList不滾動

回答

相關問題