反应本机选项卡视图，在子组件中暂居顶部

Question

我对带有三个组件的本机选项卡有反应。

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的引用传递给孩子并听onIndexChange并调用FlatList.scrollTo或传递一些标志并在正确时调用它。所以我想问是否还有其他解决方案，而无需将prop或ref传递给子组件，并且可能使用相同的globalFunction滚动到选项卡更改的每个视图顶部？