我在react-native-tab-view下做了两个页面用来测试瀑布流布局

import * as React from 'react';
import {  StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import TestList from "./testList"
const FirstRoute = () => (
    <TestList style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
    <TestList style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

export default class TabViewExample extends React.Component {
    state = {
        index: 0,
        routes: [
            { key: 'first', title: 'First' },
            { key: 'second', title: 'Second' },
        ],
    };

    render() {
        return (
            <TabView
                tabStyle={{
                    width:200
                }}
                navigationState={this.state}
                renderScene={SceneMap({
                    first: FirstRoute,
                    second: SecondRoute,
                })}
                onIndexChange={index => this.setState({ index })}
                initialLayout={{ width: Dimensions.get('window').width }}
            />
        );
    }
}

const styles = StyleSheet.create({
    scene: {
        flex: 1,
    },
});

我测试遇到的问题是：当我在第一页的时候，从右往左滑可以进入到，第二个页面，我这时候在第二个页面从左往右滑是没反应的。 我怀疑是我的问题，所以我把瀑布流组件删除，换成View Text 写点字，是没问题的。 所以我想反馈的这可能是个bug，我也不确定。 对于刚才描述不清楚表示抱歉，库主别生气，没灌水的意思，着急了

Hi,

i really like your module, yet most performant i could use. I have read this from your

The parent node's width and height of renderSection and renderIndexPath is bounded. You can use Flex. Conversely， The parent node's width and height of renderHeader and renderFooter is not bounded. Children must prop up parent node.

I think i don't understand Children must prop up parent node. Could your please add example for that situation? I use header for specific view in list. It should take significant dimension of whole visible screen and currently it is overflowed with list items. Anyway it should be very handle if renderHeader and renderFooter automatically handle necessary space to render component like FlatList has. Do you plan add something similar ?

Thanks.

My environment:

react-native-largelist-v2: 2.1.1
react-native: 0.75.4
Using: NativeLargeList

您好，大佬，再打扰你一下，现在使用StickyForm出现了一个bug,首先为了不让我自己的header跟随表格左右滑动而滑动，我是这么写的 renderHeader={this._renderunLockHeader}

_renderunLockHeader=()=>{ return ( <View style={{height:mHeight,width:mWidth}}> <View style={{flex:1}}> {.....这是我的头布局} ); } 就是在我自己写的布局外层套了一层<View style={{flex:1}}>,这样写出来的头布局就不会随着表格的左右滑动而滑动，但是现在出现一个点击事件的问题，见下面的图： 当我表格不左右滑动的时候，点击事件正常，都没有问题，当我表格滑动到最右端的时候，点击事件像是滑动到左边了一样，失效了，然后表格滑动回来，点击事件又好了，整个header里面所有的点击事件都是一样的， 还有一个问题就是左右滑动header,下面的表格会响应头部的左右滑动事件，如下图 请问，这两个问题，也好的解决办法吗？非常感谢！

1. Dev OS (windows/Mac/Linux) Mac
2. Target OS (iOS/Android/Both) iOS
3. Simulator or real device? (Simulator/Real Device/Both) Real Deivce iPhone 6s
4. react-native V0.54.0, react-native-gesture-handler V1.0.8

here is my code

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { LargeList } from "react-native-largelist-v2";
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
import AlphabetPicker from "./AlphabetPicker";

const countries = require('./countryCode.json');

// console.log('data', countries.data);

let lastLetter = '';

class PhoneCodePicker extends React.Component {

  state = {
    data: countries,
  }

onTapLetter = (letter) => {
  if (lastLetter === letter) return; 
  lastLetter = letter;

  const letterIndex = this.state.data.findIndex(country => country.key.toLowerCase() === letter.toLowerCase());
  console.log('index', letterIndex);
  if (letterIndex > -1) {
    this.listRef.scrollToIndexPath({section: letterIndex, row: 0}, false)
  }
  // this.listRef.scrollToIndexPath({animated: true, itemIndex: index})
}

  render() {

    return (
      <View style={styles.container}>
        <LargeList
          style={styles.container}
          data={this.state.data}
          heightForSection={() => 50}
          renderSection={this._renderSection}
          heightForIndexPath={() => 50}
          renderIndexPath={this._renderIndexPath}
          ref={list => this.listRef = list}
        />
        <View style={styles.sidebar}>
          <AlphabetPicker onTapLetter={this.onTapLetter} />
        </View>
      </View>
    );
  }

  _renderSection = (section) => {
    console.log('section header', section)
    const country = this.state.data[section];
    return (
      <View style={styles.section}>
        <Text>
          {country.key}
        </Text>
      </View>
    );
  };

  _renderIndexPath = ({ section, row }) => {
    console.log('section body', section, row);
    const country = this.state.data[section].items[row];
    return (
      <View style={styles.row}>
        <Text>
          {country.countryName}  +{country.phoneCode}
        </Text>
        <View style={styles.line} />
      </View>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  section: {
    flex: 1,
    backgroundColor: "gray",
    justifyContent: "center",
    alignItems: "center"
  },
  row: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  line: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    height: 1,
    backgroundColor: "#EEE"
  },
  sidebar: {
    position: 'absolute',
    right: 0,
    width:  30,
  }
});

export default gestureHandlerRootHOC(PhoneCodePicker)

and some part of countriesJSON:

[
  {
    "items": [
      {
        "countryName": "安道尔",
        "countryPinyin": "an dao er",
        "phoneCode": "376",
        "countryCode": "AD"
      },
      {
        "countryName": "阿拉伯联合酋长国",
        "countryPinyin": "a la bo lian he qiu zhang guo",
        "phoneCode": "971",
        "countryCode": "AE"
      },
      {
        "countryName": "阿富汗",
        "countryPinyin": "a fu han",
        "phoneCode": "93",
        "countryCode": "AF"
      },
      {
        "countryName": "安提瓜和巴布达",
        "countryPinyin": "an ti gua he ba bu da",
        "phoneCode": "1",
        "countryCode": "AG"
      },
      {
        "countryName": "安圭拉",
        "countryPinyin": "an gui la",
        "phoneCode": "1",
        "countryCode": "AI"
      },
      {
        "countryName": "阿尔巴尼亚",
        "countryPinyin": "a er ba ni ya",
        "phoneCode": "355",
        "countryCode": "AL"
      },
      {
        "countryName": "安哥拉",
        "countryPinyin": "an ge la",
        "phoneCode": "244",
        "countryCode": "AO"
      },
      {
        "countryName": "阿根廷",
        "countryPinyin": "a gen ting",
        "phoneCode": "54",
        "countryCode": "AR"
      },
      {
        "countryName": "奥地利",
        "countryPinyin": "ao de li",
        "phoneCode": "43",
        "countryCode": "AT"
      },
      {
        "countryName": "澳大利亚",
        "countryPinyin": "ao da li ya",
        "phoneCode": "61",
        "countryCode": "AU"
      },
      {
        "countryName": "阿鲁巴",
        "countryPinyin": "a lu ba",
        "phoneCode": "297",
        "countryCode": "AW"
      },
      {
        "countryName": "阿塞拜疆",
        "countryPinyin": "a sai bai jiang",
        "phoneCode": "994",
        "countryCode": "AZ"
      },
      {
        "countryName": "阿尔及利亚",
        "countryPinyin": "a er ji li ya",
        "phoneCode": "213",
        "countryCode": "DZ"
      },
      {
        "countryName": "爱沙尼亚",
        "countryPinyin": "ai sha ni ya",
        "phoneCode": "372",
        "countryCode": "EE"
      },
      {
        "countryName": "埃及",
        "countryPinyin": "ai ji",
        "phoneCode": "20",
        "countryCode": "EG"
      },
      {
        "countryName": "埃塞俄比亚",
        "countryPinyin": "ai sai e bi ya",
        "phoneCode": "251",
        "countryCode": "ET"
      },
      {
        "countryName": "爱尔兰",
        "countryPinyin": "ai er lan",
        "phoneCode": "353",
        "countryCode": "IE"
      },
      {
        "countryName": "阿曼",
        "countryPinyin": "a man",
        "phoneCode": "968",
        "countryCode": "OM"
      }
    ],
    "key": "A"
  },
  {
    "items": [
      {
        "countryName": "波斯尼亚和黑塞哥维那",
        "countryPinyin": "bo si ni ya he hei sai ge wei na",
        "phoneCode": "387",
        "countryCode": "BA"
      },
      {
        "countryName": "巴巴多斯",
        "countryPinyin": "ba ba duo si",
        "phoneCode": "1",
        "countryCode": "BB"
      },
      {
        "countryName": "比利时",
        "countryPinyin": "bi li shi",
        "phoneCode": "32",
        "countryCode": "BE"
      },
      {
        "countryName": "布基纳法索",
        "countryPinyin": "bu ji na fa suo",
        "phoneCode": "226",
        "countryCode": "BF"
      },
      {
        "countryName": "保加利亚",
        "countryPinyin": "bao jia li ya",
        "phoneCode": "359",
        "countryCode": "BG"
      },
      {
        "countryName": "巴林",
        "countryPinyin": "ba lin",
        "phoneCode": "973",
        "countryCode": "BH"
      },
      {
        "countryName": "布隆迪",
        "countryPinyin": "bu long di",
        "phoneCode": "257",
        "countryCode": "BI"
      },
      {
        "countryName": "贝宁",
        "countryPinyin": "bei ning",
        "phoneCode": "229",
        "countryCode": "BJ"
      },
      {
        "countryName": "百慕大",
        "countryPinyin": "bai mu da",
        "phoneCode": "1",
        "countryCode": "BM"
      },
      {
        "countryName": "玻利维亚",
        "countryPinyin": "bo li wei ya",
        "phoneCode": "591",
        "countryCode": "BO"
      },
      {
        "countryName": "巴西",
        "countryPinyin": "ba xi",
        "phoneCode": "55",
        "countryCode": "BR"
      },
      {
        "countryName": "巴哈马",
        "countryPinyin": "ba ha ma",
        "phoneCode": "1",
        "countryCode": "BS"
      },
      {
        "countryName": "不丹",
        "countryPinyin": "bu dan",
        "phoneCode": "975",
        "countryCode": "BT"
      },
      {
        "countryName": "博茨瓦纳",
        "countryPinyin": "bo ci wa na",
        "phoneCode": "267",
        "countryCode": "BW"
      },
      {
        "countryName": "白俄罗斯",
        "countryPinyin": "bai e luo si",
        "phoneCode": "375",
        "countryCode": "BY"
      },
      {
        "countryName": "伯利兹",
        "countryPinyin": "bo li zi",
        "phoneCode": "501",
        "countryCode": "BZ"
      },
      {
        "countryName": "冰岛",
        "countryPinyin": "bing dao",
        "phoneCode": "354",
        "countryCode": "IS"
      },
      {
        "countryName": "北马里亚纳群岛",
        "countryPinyin": "bei ma li ya na qun dao",
        "phoneCode": "1",
        "countryCode": "MP"
      },
      {
        "countryName": "巴拿马",
        "countryPinyin": "ba na ma",
        "phoneCode": "507",
        "countryCode": "PA"
      },
      {
        "countryName": "巴布亚新几内亚",
        "countryPinyin": "ba bu ya xin ji nei ya",
        "phoneCode": "675",
        "countryCode": "PG"
      },
      {
        "countryName": "巴基斯坦",
        "countryPinyin": "ba ji si tan",
        "phoneCode": "92",
        "countryCode": "PK"
      },
      {
        "countryName": "波兰",
        "countryPinyin": "bo lan",
        "phoneCode": "48",
        "countryCode": "PL"
      },
      {
        "countryName": "波多黎各",
        "countryPinyin": "bo duo li ge",
        "phoneCode": "1",
        "countryCode": "PR"
      },
      {
        "countryName": "巴勒斯坦领土",
        "countryPinyin": "ba lei si tan ling tu",
        "phoneCode": "970",
        "countryCode": "PS"
      },
      {
        "countryName": "巴拉圭",
        "countryPinyin": "ba la gui",
        "phoneCode": "595",
        "countryCode": "PY"
      }
    ],
    "key": "B"
  }
]

Same as issue 188,but V2 has no 'numberOfSectionPoolSize' property.

I've been trying your LargeListSample, with below config

render() {
    return (
      <LargeListSample
        style={{flex:1}}
        numberOfSections={1}
        numberOfEachSection={2}
        nativeOptimize={false}
      />
    );
  }

I've a added console.log("Rendering item... for "+row); to the renderItem method to get the number of times the renderCell called, and it shows below output

Why does it call too many times renderItem ? I've only 1 section and 2 items in it.

I did this because, it takes more time than expected to render simple output like this.

Here's my LargeListSample

Hi,

When I am calling reloadData, the section of the list disappears while it's loading but the rows remain there. How can I avoid this ? Either everything disappears or all stays, but having just a part of the component that disappears looks buggy.

Thank you!

Simon

Invariant Violation: inputRange must be monotonically non-decreasing -1,0,750,1050,1080,1080.1,1070,1820,1850

我集成通讯录列表,其中一个子部门列表点击的时候报以上错,其他的子级部门都正常!请指教,多谢

这是我的代码

Hi. This is a great module. Thanks for making it available.

I've included gifs showing the issues I'm facing (give them a moment to load please as they're quite large).

Basically, in the first example I'm not using reloadData when making a call to setState. The behaviour is almost perfect, it's pretty much what I want, except all the previous rows are still rendered in the view hierarchy. In the case when there's results from both sections, they're not visible in the filtered results unless I scroll pass all the empty rows to the next section.

I've tried:

• reloadAll() • reloadIndexPaths() - both with the inclusive & exclusive index paths.

I make these calls right after I setState, but they're not fixing the problem.

The second example shows a version where a call reloadData in componentDidUpdate, this fixes the empty rows issue, but as you can see there's a very visible flash / blinking between the content being rendered to its final state.

If there's a way to fix either of these they'll give me the same, desired end-result. Let me know if there's anything else I can provide.

Regards.

报下面的错是什么原因？ Warning: Native component for "STTVCellView" does not exist Warning: Native component for "STTVCellContainerView" does not exist Warning: Native component for "STTVSectionView" does not exist Warning: Native component for "STTVTableView" does not exist Warning: Native component for "STTVHeaderView" does not exist Warning: Native component for "STTVFooterView" does not exist

Hi, i have a problem reloading data in my large list. My large list shows a list of status [accepted/not accepted] and a button to toggle that status. When i click the button i toggle the status of that row updating my list but the row doesn't re-render and the status always remain the previous status also if the data list changed. I've tried using reloadData(), and in fact i see the section header blink so the list is reloading, but the row remain unchanged. Can you help me?

How to use this package instead of Flatlist, I have a basic chat application with react-native-gifted-chat the react-native-gifted-chat has implemented the flatlist for messages and it works slow. So want to see this package if works well than that. Could you please someone help me how to use this package instead of flatlist???

The following code snipt which it is by Flatlist should be change to Largelist:

import PropTypes from 'prop-types';
import React from 'react';

import { FlatList, View, StyleSheet, Keyboard, TouchableOpacity, Text } from 'react-native';

import LoadEarlier from './LoadEarlier';
import Message from './Message';
import Color from './Color';

export default class MessageContainer extends React.PureComponent {

    state = {
        showScrollBottom: false,
    };

    componentDidMount() {
        if (this.props.messages.length === 0) {
            this.attachKeyboardListeners();
        }
    }

    componentWillUnmount() {
        this.detachKeyboardListeners();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.messages.length === 0 && nextProps.messages.length > 0) {
            this.detachKeyboardListeners();
        } else if (this.props.messages.length > 0 && nextProps.messages.length === 0) {
            this.attachKeyboardListeners(nextProps);
        }
    }

    attachKeyboardListeners = () => {
        const { invertibleScrollViewProps: invertibleProps } = this.props;
        Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
        Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
        Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
        Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
    };

    detachKeyboardListeners = () => {
        const { invertibleScrollViewProps: invertibleProps } = this.props;
        Keyboard.removeListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
        Keyboard.removeListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
        Keyboard.removeListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
        Keyboard.removeListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
    };

    renderFooter = () => {
        if (this.props.renderFooter) {
            const footerProps = {
                ...this.props,
            };
            return this.props.renderFooter(footerProps);
        }
        return null;
    };

    renderLoadEarlier = () => {
        if (this.props.loadEarlier === true) {
            const loadEarlierProps = {
                ...this.props,
            };
            if (this.props.renderLoadEarlier) {
                return this.props.renderLoadEarlier(loadEarlierProps);
            }
            return <LoadEarlier {...loadEarlierProps} />;
        }
        return null;
    };

    scrollTo(options) {
        if (this.flatListRef && options) {
            this.flatListRef.scrollToOffset(options);
        }
    }

    scrollToBottom = () => {
        this.scrollTo({ offset: 0, animated: 'true' });
    };

    handleOnScroll = (event) => {
        if (event.nativeEvent.contentOffset.y > this.props.scrollToBottomOffset) {
            this.setState({ showScrollBottom: true });
        } else {
            this.setState({ showScrollBottom: false });
        }
    };

    renderRow = ({ item, index }) => {
        if (!item._id && item._id !== 0) {
            console.warn('GiftedChat: `_id` is missing for message', JSON.stringify(item));
        }
        if (!item.user) {
            if (!item.system) {
                console.warn('GiftedChat: `user` is missing for message', JSON.stringify(item));
            }
            item.user = {};
        }
        const { messages, ...restProps } = this.props;
        const previousMessage = messages[index + 1] || {};
        const nextMessage = messages[index - 1] || {};

        const messageProps = {
            ...restProps,
            key: item._id,
            currentMessage: item,
            previousMessage,
            nextMessage,
            position: item.user._id === this.props.user._id ? 'right' : 'left',
        };

        if (this.props.renderMessage) {
            return this.props.renderMessage(messageProps);
        }
        return <Message {...messageProps} />;
    };

    renderHeaderWrapper = () => <View style={styles.headerWrapper}>{this.renderLoadEarlier()}</View>;

    renderScrollToBottomWrapper() {
        const scrollToBottomComponent = (
            <View style={styles.scrollToBottomStyle}>
                <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
                    <Text>V</Text>
                </TouchableOpacity>
            </View>
        );

        if (this.props.scrollToBottomComponent) {
            return (
                <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
                    {this.props.scrollToBottomComponent}
                </TouchableOpacity>
            );
        }
        return scrollToBottomComponent;
    }

    keyExtractor = (item) => `${item._id}`;

    render() {
        if (this.props.messages.length === 0) {
            return <View style={styles.container} />;
        }
        return (
            <View style={styles.container}>
                {this.state.showScrollBottom && this.props.scrollToBottom ? this.renderScrollToBottomWrapper() : null}
                <FlatList
                    ref={(ref) => (this.flatListRef = ref)}
                    extraData={this.props.extraData}
                    keyExtractor={this.keyExtractor}
                    enableEmptySections
                    automaticallyAdjustContentInsets={false}
                    inverted={this.props.inverted}
                    data={this.props.messages}
                    style={styles.listStyle}
                    contentContainerStyle={styles.contentContainerStyle}
                    renderItem={this.renderRow}
                    {...this.props.invertibleScrollViewProps}
                    ListFooterComponent={this.renderHeaderWrapper}
                    ListHeaderComponent={this.renderFooter}
                    onScroll={this.handleOnScroll}
                    scrollEventThrottle={100}
                    {...this.props.listViewProps}
                />
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainerStyle: {
        justifyContent: 'flex-end',
    },
    headerWrapper: {
        flex: 1,
    },
    listStyle: {
        flex: 1,
    },
    scrollToBottomStyle: {
        opacity: 0.8,
        position: 'absolute',
        paddingHorizontal: 15,
        paddingVertical: 8,
        right: 10,
        bottom: 30,
        zIndex: 999,
        height: 40,
        width: 40,
        borderRadius: 20,
        backgroundColor: Color.white,
        alignItems: 'center',
        justifyContent: 'center',
        shadowColor: Color.black,
        shadowOpacity: 0.5,
        shadowOffset: { width: 0, height: 0 },
        shadowRadius: 1,
    },
});

MessageContainer.defaultProps = {
    messages: [],
    user: {},
    renderFooter: null,
    renderMessage: null,
    onLoadEarlier: () => { },
    inverted: true,
    loadEarlier: false,
    listViewProps: {},
    invertibleScrollViewProps: {},
    extraData: null,
    scrollToBottom: false,
    scrollToBottomOffset: 200,
};

MessageContainer.propTypes = {
    messages: PropTypes.arrayOf(PropTypes.object),
    user: PropTypes.object,
    renderFooter: PropTypes.func,
    renderMessage: PropTypes.func,
    renderLoadEarlier: PropTypes.func,
    onLoadEarlier: PropTypes.func,
    listViewProps: PropTypes.object,
    inverted: PropTypes.bool,
    loadEarlier: PropTypes.bool,
    invertibleScrollViewProps: PropTypes.object,
    extraData: PropTypes.object,
    scrollToBottom: PropTypes.bool,
    scrollToBottomOffset: PropTypes.number,
    scrollToBottomComponent: PropTypes.func,
};

运行 android --variant release 后报错

Configure project :react-native-spring-scrollview
publishNonDefault is deprecated and has no effect anymore. All variants are now published.

react-native: 0.63.3 react-native-spring-scrollview: 3.0.1-rc.5 react-native-largelist: 3.1.0-rc.1

没有调试ios，只调试了安卓。 写了一个 SectionList 当 renderFooter 是下面这种时，即使有数据也不会执行 renderFooter，renderSection 和 renderIndexPath renderFooter() { return <CustomComponent /> } 改成 renderFooter() { return <View> <CustomComponent /> </View> } 然后都变正常了

I run example code sticky form, but list is very lag when scroll both of vertical and horizontal. Help me Please! Thank you so much.

1. Dev OS (/Mac/)
2. Target OS (/Android/)
3. Simulator or real device? (Simulator/Real Device/)
4. The version of react-native (0.64.2), react-native-spring-scrollview(3.0.1-rc.5), react-native-largelist (3.1.0-rc.2)

6. Picture or videos of issue if required!