Реагирует на собственное представление вкладок, прокручивая вверх в дочернем компоненте - PullRequest
Новая
       26

Реагирует на собственное представление вкладок, прокручивая вверх в дочернем компоненте

0 голосов
/ 20 марта 2019

Я реагирую на собственные вкладки с тремя компонентами внутри. 

export class Tabs extends Component {
    public state = {
        isHeaderOpen: true,
        index: 0,
        routes: [
            { key: 'comp1', title: 'Component 1' },
            { key: 'comp2', title: 'Component 2' },
            { key: 'comp3', title: 'Component 3' },
        ],
    };

public onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    if (event.nativeEvent) {
        const isHeaderOpen =
            event.nativeEvent.contentOffset.y < this.HEADER_OFFSET &&
            !(event.nativeEvent.contentOffset.y > this.HEADER_OFFSET_WITH_MARGIN);

        this.setState({
            isHeaderOpen,
        });
    }
};

private renderComponent1 = () => <Component1 onScroll={this.onScroll} />;
private renderComponent2 = () => <Component2 onScroll={this.onScroll} />;
private renderComponent2 = () => <Component3 onScroll={this.onScroll} />;

public render(): JSX.Element {
    return (
        <>
            <Header isHeaderOpen={this.state.isHeaderOpen} />
            <TabView
                renderTabBar={props => <TabBar {...props} />}
                navigationState={this.state}
                renderScene={SceneMap({
                    comp1: this.renderComponent1,
                    comp2: this.renderComponent2,
                    comp3: this.renderComponent3,
                })}
                onIndexChange={index => this.setState({ index, isHeaderOpen: true })}
                initialLayout={{
                    width: this.windowObject.width,
                    height: this.windowObject.height,
                }}
                swipeEnabled={false}
            />
        </>
    );
}


export class Component1 extends Component {
    public render() {
        return (
            <FlatList
                onScroll={this.props.onScroll}
                scrollEventThrottle={1000}
                data={mock}
                renderItem={({ item }) => <ListItem item={item} />}
            />
        );
    }
}

В моем приложении у меня будет несколько экранов, похожих на вкладки. И у каждого из них будет по 3 подкомпонента. Я добавляю анимацию в заголовок, передавая onScroll дочерним компонентам. Но во вкладке изменение маршрута я хочу открыть заголовок и прокрутить вверх на выбранном экране. Я знаю, что могу передать ссылку TabView на childs и прослушать onIndexChange и вызвать FlatList.scrollTo или передать какой-нибудь флаг и вызвать его, когда это правда. Поэтому я хочу спросить, есть ли какое-либо другое решение, не передавая реквизиты или ссылки дочерним компонентам, и, возможно, используйте ту же глобальную функцию для прокрутки вверх каждого представления на вкладке?

...