FlatList 不滚动答案

【问题标题】：FlatList not scrollingFlatList 不滚动
【发布时间】：2018-07-18 09:28:53
【问题描述】：

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

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

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',
 },
});

从我的 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',
},
});

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

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

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

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

【问题讨论】：

您是否尝试过使用数据列表中的一些文本渲染一个简单的以查看您的组件是否导致了一些问题？
旁注：ActivityList 上的 style 属性有什么作用吗？

标签： javascript css reactjs react-native react-native-android

【解决方案1】：

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

【讨论】：

这解决了我的问题。我在 s 滚动视图中有一个平面列表，滚动视图有一个 flex:1 。一旦我删除了它们现在一起滚动。谢谢！
上帝保佑你，伙计。问题在于平面列表的风格。我花了一周的时间解决它，直到我找到你的评论。

【解决方案2】：

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

只需添加 TouchableWithoutFeedback 即可覆盖 flatlist 中的每个元素。奇怪，但它有效。

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

【讨论】：

也为我工作。有一些对滚动手势响应良好的视图，但文本组件没有。但是，将整个项目包装在 TouchableWithoutFeedback 中的 renderItem 中就可以了，谢谢！
这是我让它在 iOS 上运行的唯一方法。 Android 已经很好了。
出于某种原因，用TouchableWithoutFeedback 包裹我的项目有效。但我不明白为什么它会起作用。

【解决方案3】：

对于其他提出这个问题的人：我的 FlatList 在 TouchableWithoutFeedback 中。我将其更改为 View 并且能够再次滚动。

【讨论】：

这可能为我节省了数小时的故障排除时间。谢谢！

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

对我来说，问题是平面列表项中图像的大小。我只是按百分比设置它的高度，这是一个错误。

这里有一些提示。

1：FlatList contentContainer 不设置固定高度

2：Flatlist 中的子元素不能有百分比高度，例如：50% 否则它会占用列表的一半并且不要让其他子元素渲染

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

【讨论】：

【解决方案6】：

对我来说，我的列表顶部有一个绝对定位的透明视图！

不管什么原因，它只影响了我的安卓版本。

我认为绝对位置使我看的时候检查员没有看到它。

【讨论】：

【解决方案7】：

FlatList 我也遇到过同样的问题。

<View style={styles.list}>
<FlatList/>
</View>

我用过 flex : 1, flexGrow :1 对于列表样式。然后它对我有用。

【讨论】：

【解决方案8】：

在我的例子中，我在我的应用程序的顶层有一个 TouchableWithoutFeedback 包装器，用于删除键盘弹出窗口单击屏幕上的任意位置。
这导致FlatList 在实际设备上无法正常运行（它在模拟器上运行良好）。删除后，FlatList 的行为正常。

【讨论】：

【解决方案9】：

我遇到了类似的问题，但实际上是我使用两根手指滚动的方式，就像在 Mac 上正常滚动一样，而不是用手指双击，按住然后滚动

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
这并不能真正回答问题。如果您有其他问题，可以点击提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

【解决方案10】：

对我来说，解决方案是用 height 设置为 100%

的 View 包裹整个 FlatList

const styles = StyleSheet.create({
  container: {
    padding: "8px",
    height: "100%"
  },
});

<View style={styles.container}>
  <FlatList
    { /* ... */ }
  />
</View>

【讨论】：