首页 > 解决方案 > 反应原生水平平面列表崩溃

问题描述

我正在使用 react native flatlist 在我希望将 flatlist 设置为水平的 react native flatlist 中呈现一些数据。对于要渲染的数据,我创建了一个单独的函数并在我的平面列表中调用它。我的渲染项中有一些图像和文本,现在问题是当我只渲染文本时它似乎工作正常,但是当我添加图像时它崩溃了。下面是我的渲染项:

renderOtherBannerItem =(childItem, index)=>(
  <TouchableOpacity
    onPress={this.onClickListenerForImageCategoryBrandProductBanner.bind(this, childItem)}
    style={{
        width: childItem.width,
        height: childItem.height,
        padding: 3,
    }}>
    {childItem.numColumns == 1 ? (
       <Image
          style={{
            flex: 1,
            shadowColor: "#000",
            shadowOffset: {
              width: 0,
              height: 1,
            },
            shadowOpacity: 0.18,
            shadowRadius: 1.0,
            elevation: 1,
            width: "100%",
            borderRadius: 4,
            height: childItem.height,
            resizeMode: "stretch",
          }}
          source={{ uri: childItem.img }}
        />)

我在里面叫它:

<FlatList
  style={{ marginBottom: 20 }}
  numColumns={numColumns}
  data={bannerViewList}
  keyExtractor={(item) => item.key}
  renderItem={({ item, index }) => this.renderOtherBannerItem(item, index)}
/>;

谁能告诉我在渲染函数中做错了什么,任何线索都会很棒。谢谢你。

标签: reactjsreact-nativereact-native-androidreact-native-flatlist

解决方案


推荐阅读