标签: react-native-flatlist

我正在使用不同的节标题渲染多个节.我按照我想要的方式显示它有些麻烦.我想把我的标题放在顶部和下面,该部分的项目作为网格.

这就是我现在所拥有的

使用此代码:

<SectionList
        contentContainerStyle={styles.sectionListContainer}
        renderItem={this.renderItem}
        keyExtractor={this.getKey}
        renderSectionHeader={this.renderSectionHeader}
        shouldItemUpdate={this.shouldItemUpdate}
        sections={[
          { data: mostViewedArray, key: "most_viewed", title: "Most viewed" },
          { data: recentlyArray, key: "recently", title: "Recently" }
        ]}
      />



const styles = StyleSheet.create({
   sectionListContainer: {
     flex: 1,
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "space-between"
   }
});

所以我希望能够不将sectionListContainer的css应用于sectionHeader.但我不确定这是可能的.

如果有人对此有任何想法,请告诉我!

谢谢!

我有一个FlatList显示用户评论的内容,我还希望用用户的个人资料填充标题(这是与获取评论的网络调用不同的网络调用).

这是render()看起来像:

render() {
    return (
      <FlatList
        data = {this.state.comments}
        renderItem = {this.renderComment}
        ListHeaderComponent={this.renderHeader}
        keyExtractor={(comment, index) => comment.id}
      />
    )
  }

然后renderHeader看起来像:

  renderHeader() {
     return (
      <ProfileView user={this.state.profile} />
    )
  }

我使用fetchin componentWillMount然后setState才能获取数据(这部分工作正常).现在我在模拟器上得到的错误是

undefined不是对象(评估'this.state.profile')

但是当我删除该renderHeader方法时,会正确获取注释.

由于我对RN很新,你能帮助我理解错误以及解决方法吗？

我正在使用React Native 0.44.0,我正在尝试使用卡式布局制作水平FlatList.无论出于何种原因,无论我做什么,我都无法启动水平模式.似乎总是垂直呈现......

这是我正在使用的代码:

 <FlatList
    horizontal={true}
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    ref={ref => {
        this.newsFeedListRef = ref;
    }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({
        index,
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index + headerBarHeight
    })} />;

我可以发布我的组件渲染的代码,但它们都没有使用任何东西,除了样式的填充和边距,所以flex或flexDirection东西.

我有一个react-native SectionList,在视图中包含多个FlatLists.当用户触摸底部FlatList中的一个元素时,上面的一些FlatLists将加载新数据,从而导致用户的当前视图被推高.换句话说,用户的y位置保持不变,但先前在视图中的内容现在具有更大的y位置.

在添加上面其他FlatLists中的元素之前,如何让用户的y位置与他们在视图中的元素保持同步？

我state用来存储以下数据。

state = {
    refresh: true,
    isFetching: true,
    showLoadingBottom: false,
    data: []
};

在componentDidMount我手动调用一个_fetchData将数据加载到this.state.data.

当 flatlist 滚动到最后时，它会触发_fetchData两次，最终两次返回相同的数据（这是另一个问题，为什么它会触发两次？）。

一旦 flatlist 到达末尾，即没有更多数据从服务器返回，它就会进入一个无限循环，因为onEndReached即使服务器没有返回新数据并this.state.data保持不变，它也会一遍又一遍地不断触发。

这是我的render代码

render() {

    return (

        <View
            style={{
                flex: 1
            }}>

            <FlatList

                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refresh}
                        onRefresh={() => {
                            this.setState({
                                refresh: true
                            }, this._fetchData);
                        }}
                        title={"Pull To Refresh"}
                        tintColor={darkGrey}
                        titleColor={darkGrey}/>
                }

                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    this.setState({
                        showLoadingBottom: true
                    }, () => {
                        this._fetchData();
                    });

                }}

                showsVerticalScrollIndicator={false} …

我正在尝试找到一种创造性的方法来使用SectionList节标题嵌套 s 。这是基本设置：

<SectionList
  sections={this.sectionData}
  stickySectionHeadersEnabled
  renderItem={({ item }) => (
    <SectionList
      sections={_.groupBy(item, data => data.date)}
      stickySectionHeadersEnabled
      renderItem={({ item }) => this.renderData(item)}
    />
  )}  
/>

虽然此设置渲染良好，但内部部分标题不会粘贴，可能是由于该特定部分SectionList没有定义的高度，因此列表不“知道”粘贴在哪里。

这是一个屏幕截图，其中灰色标题粘住，但白色标题没有粘住。

我正在绞尽脑汁寻找一种聪明的方法来实现这一点，但目前想不出任何办法。任何帮助或见解将不胜感激！

我正尝试使用Grid View渲染图像，FlatList但面临下一个问题：

我的代码段：

...
renderItem = ({item}) => {
        return (
        <Image source = {{uri: item.photoUrl[0].photoUrl}} style = {{margin: 1,
                                                                    height: Dimensions.get('window').width / 3,
                                                                    width: Dimensions.get('window').width / 3,
                                                                    resizeMode: 'cover'}}
        />
    )
}

render() {
    if(this.props.viewOption === 'grid') {
        return <FlatList
                    data = {this.state.photosKeysArray}
                    keyExtractor={(item, index) => item.id}
                    numColumns = {3}
                    renderItem={this.renderItem}
                />
    } ...

问题是FlatList应该根据item自己计算宽度numColumns，对吗？因此，Image我应该只指定高度。由于我要渲染正方形图像，因此我给高度分配了一个等于的值Dimensions.get('window').width/3，其中3的值为numColumns。

之后，FlatList呈现空白而不是图像。

如果我将width属性添加到Image（例如在我的代码段中）并将其定义为高度（正方形图像，还记得吗？），那么FlatList会渲染3列带有正方形图像的列，但它们在我的草图上显示为（两个完整图像，最后一列被切掉） ）：

如何显示三整列？

我面临着 React Native 中似乎长期存在的问题。
我正在使用带有 RN 版本 0.59 的 Expo SDK35。由于代码库较大，我尚未更新到 Expo SDK36 / RN 0.60，但如果这可以弥补我的问题的解决方案，我可以更新。

我有一个Animated.View有FlatList子组件的组件，并且我无法使用scrollToIndex()FlatList 引用上应该提供的静态方法（特别是）。请参阅下一个示例代码：

class Example extends React.Component{
    constructor(props){
        super(props);
        this.myRef = null;
    }

    componentDidUpdate = () => {
        /*
            somewhere in code outside this class, a re-render triggers
            and passes new props to this class.
            I do have props change detection, and some more other code,
            but I have removed it in order to minimize the code example here …

我正在构建一个聊天应用程序，使用倒置的Flatlist. 我在onEndReached调用时将新项目添加到列表顶部，并且一切正常。

问题是，如果将项目添加到底部，它会立即滚动到列表底部。这意味着用户必须向上滚动才能阅读刚刚添加的消息（这很糟糕）。

我试图调用scrollToOffsetin onContentSizeChange，但这有 1 秒的延迟，滚动来回跳跃。

当我将项目添加到顶部和底部时，如何通过在屏幕上保留相同的消息而不是显示新消息来使列表行为相同？

FlatListlistview带有在到达末尾时从 API 获取下一组数据的选项，我们还可以使用该scrollTo函数来保留最后的滚动位置，Flatlist但实现这种方式会在每个下一个分页数据请求上创建重新加载，从而FlatList完成listview加载和我们滚动到最后一个左侧位置。无论如何，如果我们可以实现一个功能，即Flatlist不刷新现有数据，仅将新数据附加到底部而不改变反应本机中的滚动位置，将有助于FlastList以更优化的方式呈现。任何有关建议的帮助将不胜感激。