代码之家  ›  专栏  ›  技术社区  ›  matthiasgoossens

平面列表未滚动

  •  31
  • matthiasgoossens  · 技术社区  · 7 年前

    我创建了一个屏幕,在其中显示包含平面列表的组件。由于某种原因,我无法滚动浏览列表。有人能发现我的错误并为我指出正确的方向吗?

    “我的屏幕文件”中的渲染功能和样式:

    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、标题、日期和小时。

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

    12 回复  |  直到 7 年前
        1
  •  72
  •   swimisbell    7 年前

    取出 flex: 1 在您的 styles.cardcontainer ,应该可以滚动。平面列表/滚动视图 contentContainerStyle 如果愿意,prop会包装平面列表中的所有子组件,并且永远不应该有定义的高度或弹性值。如果需要设置 弹性:1 对于平面列表本身,请使用 style={{flex: 1}} 相反干杯

        2
  •  24
  •   Kyo Kurosagi    6 年前

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

    通过简单地添加TouchableWithoutFeedback来覆盖平面列表中的每个元素。很奇怪,但它确实有效。

    _renderCardItem = ({ item }) => (
    <TouchableWithoutFeedback onPress={()=>{}}>
    <CardItem
      image={item.image}
      title={item.title}
      date={item.date}
      hour={item.hour}
    />
    </TouchableWithoutFeedback>
    );
    
        3
  •  16
  •   tech js    5 年前

    只需执行以下步骤即可获得平面列表滚动。

    <View style={{flex:1}}>
      <FlatList
        data={this.state.data}
        renderItem={({item}) => this.renderData(item)}
        keyExtractor={item => item._id}
        contentContainerStyle={{
        flexGrow: 1,
        }}
      />
    </View>
    
        4
  •  10
  •   raphaelrk    5 年前

    对于其他回答这个问题的人来说:我的平面列表在一个触摸屏内,没有反馈。我将其更改为视图,并可以再次滚动。

        5
  •  4
  •   TheEhsanSarshar    5 年前

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

    这里有一些提示。

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

    2: 平面列表中的子对象的高度不能为百分比,例如:50%,否则将占用列表的一半,并且不允许其他子对象渲染

    3: 如果您想要一个固定大小的平面列表,请将其高度放在style属性中,而不是contentContainerStyle

        6
  •  4
  •   mubasshir00    3 年前

    对于平面列表,我也面临同样的问题。

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

    我用过 flex : 1, flexGrow :1 用于列表样式。那对我来说就行了。

        7
  •  1
  •   Mayowa Daniel    4 年前

    对我来说,我的列表上有一个绝对定位的透明视图!

    不管出于什么原因,它只影响了我的android版本。

    我想是绝对位置造成的,所以检查员在我查看时没有看到它。

        8
  •  1
  •   A.Z    3 年前

    我也有类似的问题,但实际上我是用两个手指滚动的,就像Mac上的普通滚动一样,而不是用手指双击,按住然后滚动

        9
  •  1
  •   Nitsan BenHanoch    3 年前

    对我来说,解决方案是用一个 高度设置为100%

    const styles = StyleSheet.create({
      container: {
        padding: "8px",
        height: "100%"
      },
    });
    
    <View style={styles.container}>
      <FlatList
        { /* ... */ }
      />
    </View>
    
        10
  •  1
  •   Badal Saibo trusktr    3 年前

    就我而言,我有 TouchableWithoutFeedback 我的应用程序顶层的包装器,用于在 单击屏幕上的任意位置。
    这导致了 FlatList 在实际设备上不能正常工作(在emulator上工作正常)。移除后 平面列表 表现正常。

        11
  •  0
  •   randomgirl1130    3 年前

    我的平面列表可以滚动,尽管我把它放在一个触摸屏内,没有反馈。我的问题是,我的平面列表项目上有一个onPressIn事件,它干扰了滚动检测。我把它改成onPress后,它就工作了。

        12
  •  0
  •   Zach Jensz    3 年前

    添加以下内容 columnWrapperStyle :

    ` <FlatList
        horizontal={false}
        data={products}
        columnWrapperStyle={{ flexWrap: 'wrap' }}
        numColumns={2}
        renderItem={renderItem}
        keyExtractor={(item, index) => index} />`