平面列表引用未定义反应本机

时间:2019-12-01 23:06:29

标签: reactjs react-native scrollview react-native-flatlist

我的平面列表引用仍然未定义。当我垂直滚动时,我希望水平滚动移动到开头


    _renderRow(type, data, index) {
        switch (type) {
            default:
                return (
                    <View style={styles.container}>
                        <FlatList
                            data={data}
                            ref={(ref) => { this.scroll = ref; }}
                            showsHorizontalScrollIndicator={false}
                            horizontal={true}
                            renderAheadOffset={2}
                            pagingEnabled={true}
                            keyExtractor={(item, index2) => index2.toString()}
                            renderItem={({item, index2}) => (
                                <View 
                                    onLayout={() => console.log('index2 ', item)}
                                    style={[
                                        styles.centerContent, {
                                        height: fullHeight,
                                        width: fullWidth,
                                        backgroundColor: (index % 2 == 0) ? 'red':'blue',
                                    }]}
                                >        
                                    <Text
                                        style={{
                                            fontSize: 40
                                        }}
                                    >
                                        {item[0]} {item[1]}
                                    </Text>
                                </View>
                            )}
                        />
                    </View>
                )
            }
    }

  scrollFront = () => {

        console.log(this.scroll)
        if(typeof(this.scroll) !== 'undefined') {
            this.scroll.scrollToIndex(0)
        }
    }


    render() {
        return (
            <View style={[styles.container, {backgroundColor: 'black'}]}>
                {this.state.loaded && (
                    <RecyclerListView 
                        style={{height: fullHeight, width: fullWidth}}
                        extendedState={this.state}
                        rowRenderer={this._renderRow} 
                        dataProvider={this.state.dataProvider}
                        layoutProvider={this._layoutProvider}
                        showsVerticalScrollIndicator={false}
                        pagingEnabled={true}
                        renderAheadOffset={1}
                        onMomentumScrollBegin={() => {
                            this.scrollFront()
                        }}

                        //onMomentumScroll={() => this.scrollFront()}
                            //this.scroll.scrollToOffset({ animated: false, offset: 0 })

                            //: null
                    />    
                )}

我认为recyclerListView仅在内存中保留一个或两个视图,也许这就是为什么我无法引用scrollview的原因。或者它可能与renderRow是一个函数有关。我不确定该如何解决

0 个答案:

没有答案