React-native：如何使用嵌套在原生 Tab 组件内的水平滚动视图？

Question

我正在使用基于本机的Tabs ，我想在其中一个选项卡中使用水平ScrollView 。

我的代码如下所示：

<Tabs>
      <Tab
          <MyComponent/>
      </Tab>
      <Tab
          <MyComponent/>
      </Tab>
</Tabs>

但是孩子的卷轴不起作用。

Answer 1

我设法使它在孩子滚动时锁定父选项卡。

有一个小吃展示如何在这里

以下是相关代码：

<Tabs locked={this.state.isLocked}>
     <Tab
         <MyComponent lockTab={this.lockTab}/>
     </Tab>
     <Tab
         <MyComponent/>
     </Tab>
</Tabs>

在MyComponent内部：

  handleInnerPressIn = () => this.props.lockTab(true);
  handleInnerPressOut = () => this.props.lockTab(false);

<ScrollView nestedScrollEnable={true} horizontal={true}>
    <TouchableWithoutFeedback
              onPressIn={this.handleInnerPressIn}
              onPressOut={this.handleInnerPressOut}>
    </TouchableWithoutFeedback>
</SrollView>

需要注意的一件重要事情是，它仅在TouchableWithoutFeedback位于（而不是包装） ScrollView时才有效

Answer 2

关注此评论部分： https://github.com/facebook/react-native/issues/21436

最后锁定滚动视图没有像其他人建议的那样工作，我从 react-native-gesture-handler 导入了嵌套的水平滚动视图。