React-native：如何使用嵌套在本机基础 Tab 组件内的水平滚动视图？答案

【问题标题】：React-native: how to use an horizontal scroll view nested inside a native-base Tab component?React-native：如何使用嵌套在本机基础 Tab 组件内的水平滚动视图？
【发布时间】：2020-04-13 11:01:49
【问题描述】：

我使用的是基于原生的Tabs，我想在其中一个选项卡中使用水平的ScrollView。

我的代码如下所示：

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

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

【问题讨论】：

标签： react-native scrollview horizontalscrollview native-base

【解决方案1】：

我设法让它在孩子滚动时锁定父标签。

有一个小吃告诉你怎么做here

以下是相关代码：

<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

时才有效

【讨论】：

【解决方案2】：

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

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

【讨论】：