Javascript FlatList 不滚动

FlatList not scrolling

提问by matthiasgoossens

i have created a screen where I display a component that contains a FlatList. For some reason I can't scroll through the list. Someone who can spot my mistake and point me in the right direction?

我创建了一个屏幕，在其中显示包含 FlatList 的组件。出于某种原因，我无法滚动列表。谁能发现我的错误并指出我正确的方向？

render-function and style from my screen file:

我的屏幕文件中的渲染功能和样式：

render() {
return (
  <View style={styles.container}>
    <SearchBar />
    <ActivityList style={styles.list} data={this.state.data} />
  </View>
);
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'flex-start',
 },
 list: {
  flex: 1,
  overflow: 'hidden',
 },
});

render function and style from my listitem component:

来自我的 listitem 组件的渲染函数和样式：

export default class CardItem extends React.PureComponent {
render() {
return (
  <View style={styles.cardview}>
    <View style={styles.imagecontainer}>
      <Image
        resizeMode="cover"
        style={styles.cardimage}
        source={{
          uri: this.props.image,
        }}
      />
    </View>
    <View style={styles.cardinfo}>
      <Text style={styles.cardtitle}>{this.props.title}</Text>
      <View style={styles.cardtext}>
        <Text style={styles.textdate}>{this.props.date}</Text>
        <Text style={styles.texthour}>{this.props.hour}</Text>
      </View>
    </View>
  </View>
);
}
}

const styles = StyleSheet.create({
 cardview: {
  flex: 1,
  justifyContent: 'flex-start',
  backgroundColor: 'white',
  elevation: 3,
  maxHeight: 200,
  width: Dimensions.get('window').width - 20,
  margin: 1,
  marginTop: 10,
  borderRadius: 4,
},
imagecontainer: {
 flex: 7,
 height: 140,
 borderRadius: 4,
},
cardimage: {
 flex: 1,
 opacity: 0.8,
 height: 140,
 borderTopLeftRadius: 4,
 borderTopRightRadius: 4,
},
cardinfo: {
 flex: 2,
 flexDirection: 'row',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 10,
},
cardtitle: {
 flex: 1,
 fontSize: 16,
 fontWeight: 'bold',
},
cardtext: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'flex-end',
},
textdate: {
 color: '#5e5e71',
},
texthour: {
 color: '#5e5e71',
},
});

render function and style from my list component:

来自我的列表组件的渲染函数和样式：

export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) => (
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
);

_keyExtractor = item => item.id;

render() {
return (
  <FlatList
    data={this.props.data}
    renderItem={this._renderCardItem}
    contentContainerStyle={styles.cardcontainer}
    keyExtractor={this._keyExtractor}
  />
);
}
}

const styles = StyleSheet.create({
 cardcontainer: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: 'white',
  alignItems: 'center',
  width: Dimensions.get('window').width,
  borderWidth: 0,
 },
});

my data items have all a unique id, title, date, hour.

我的数据项都有唯一的 ID、标题、日期、小时。

Read through all available guides and docs and found no solution.

通读所有可用的指南和文档，但没有找到解决方案。

回答by swimisbell

Take out the flex: 1in your styles.cardcontainer, that should let you scroll. The FlatList/ScrollView contentContainerStyleprop wraps all the child components—what's "inside" the FlatList if you will—and should never have a defined height or flex value. If you need to set a flex: 1for the FlatList itself use style={{flex: 1}}instead. Cheers!

取出flex: 1您的styles.cardcontainer，应该可以让您滚动。FlatList/ScrollView 属性contentContainerStyle包装了所有的子组件——如果你愿意，它是“内部”的东西——并且永远不应该有一个定义的高度或 flex 值。如果您需要flex: 1为 FlatList 本身设置一个，请style={{flex: 1}}改用。干杯!

回答by Kyo Kurosagi

I also meet this issue when I'm adding image tool in my chatting app, and found a trick solution.

我在聊天应用程序中添加图像工具时也遇到了这个问题，并找到了一个技巧解决方案。

By simply add TouchableWithoutFeedback to cover every element in flatlist. Strange but it works.

通过简单地添加 TouchableWithoutFeedback 来覆盖 flatlist 中的每个元素。奇怪，但它的工作原理。

_renderCardItem = ({ item }) => (
<TouchableWithoutFeedback onPress={()=>{}}>
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
</TouchableWithoutFeedback>
);

回答by raphaelrk

For others coming to this question: My FlatList was inside a TouchableWithoutFeedback. I changed that to a View and was able to scroll again.

对于遇到这个问题的其他人：我的 FlatList 在 TouchableWithoutFeedback 内。我将其更改为视图并能够再次滚动。

回答by tech js

Simply do following steps to get FlatList scroll.

只需执行以下步骤即可获得 FlatList 滚动。

<View style={{flex:1}}>
  <FlatList
    data={this.state.data}
    renderItem={({item}) => this.renderData(item)}
    keyExtractor={item => item._id}
    contentContainerStyle={{
    flexGrow: 1,
    }}
  />
</View>

回答by Ehsan sarshar

for me the problem was the size of an image inside the flatlist item. I just set it's height by percentage which was a mistake.

对我来说，问题是 flatlist 项目内图像的大小。我只是按百分比设置它的高度，这是一个错误。

here are some tips.

这里有一些提示。

1: don't put a fixed height for FlatList contentContainer

1：不要为FlatList contentContainer 设置固定高度

2: childs inside Flatlist must not have a height of percentage eg: 50% otherwise it take the half of list and don't let other childs to render

2：Flatlist 内的孩子不能有百分比的高度，例如：50% 否则它会占据列表的一半，不要让其他孩子渲染

3: if you want to have a fixed size FlatList put it's height inside style property not contentContainerStyle

3：如果你想要一个固定大小的 FlatList 把它的高度放在 style 属性中而不是 contentContainerStyle