React native 当父ScrollView停止滚动时，子ScrollView不会滚动

在我绘制的图像中，您可以看到两个区域，黄色的是滚动视图，红色的是平面列表。 当我从红色区域滚动时，我希望选项卡上升到标题，一旦它们接触到标题，就开始滚动FlatList的红色区域。 为此，当标签触摸标题时，我将scrollEnabled从黄色区域设置为false，问题是红色区域在我停止按下并再次按下之前不会滚动

我希望它的行为类似于instagram配置文件，其中有一些选项卡，然后是照片列表，当选项卡触到标题时，您可以继续从图像中滚动。

我将添加一些选项

第一个是零食，它再次使用父视图和子视图

问题：这在Android上有问题。当父视图和子视图都在滚动时，android上的滚动会出现口吃

其次是github回购

问题：如果其中一个选项卡被滚动，而您转到另一个选项卡，则顶部将出现空白

使用本机碱基

import React，{Component}来自“React”；
从“react native”导入{动画、尺寸、平台、文本、TouchableOpacity、视图}；
从“本机库”导入{Body，Header，List，ListItem as Item，ScrollableTab，Tab，TabHeading，Tabs，Title}；
从“反应本机线性渐变”导入LinearGradient；
const{width:SCREEN_width}=Dimensions.get（“窗口”）；
const IMAGE_HEIGHT=250；
const HEADER_HEIGHT=Platform.OS==“ios”？64 : 50;
常量滚动高度=图像高度-标题高度；
const THEME_COLOR=“rgba（85186255，1）”；
常量褪色主题颜色=“rgba（85186255，0.8）”；
导出默认类ParallaxDemo扩展组件{
nScroll=新的动画值（0）；
滚动=新动画。值（0）；
textColor=this.scroll.interpolate({
输入范围：[0，滚动高度/5，滚动高度]，
输出范围：[主题颜色，褪色主题颜色，“白色”]，
外推：“夹具”
});
tabBg=this.scroll.interpolate({
输入范围：[0，滚动高度]，
输出范围：[“白色”，主题颜色]，
外推：“夹具”
});
tabY=this.nScroll.interpolate({
输入范围：[0，滚动高度，滚动高度+1]，
输出范围：[0,0,1]
});
headerBg=this.scroll.interpolate({
输入范围：[0，滚动高度，滚动高度+1]，
输出范围：[“透明”，“透明”，主题颜色]，
外推：“夹具”
});
imgScale=this.nScroll.interpolate({
输入范围：[-25,0]，
输出范围：[1.1,1]，
右外推器：“夹具”
});
imgOpacity=this.nScroll.interpolate({
输入范围：[0，滚动高度]，
outputRange:[1,0]，
});
tabContent=（x，i）=>
{
这个.heights[i]=高度；
如果（this.state.activeTab==i）this.setState（{height}）
}}>
{new Array（x）.fill（null）.map（（{，i）=>Item{i}}
;
高度=[500500]；
状态={
活动选项卡：0，
身高：500
};
建造师（道具）{
超级（道具）；
this.nScroll.addListener（Animated.event（[{value:this.scroll}]，{useNativeDriver:false}））；
}
render（）{
返回(
您可以从这里使用选项卡式标题
问题：因为它的模块没有太多的定制空间，但有足够的空间。而且当我使用它时，也有一些问题，比如所有屏幕都滚动，因为相同的偏移量，现在可能已经解决了

所以基本上来说，他们都有一些问题，你以后要解决。
但是我推荐使用netguru的sticky parallax头的第四个选项。
我将添加一些选项

第一个是零食，它再次使用父视图和子视图

问题：这在Android上有问题。当父视图和子视图都在滚动时，Android上的滚动会出现口吃

其次是github回购
问题：如果其中一个选项卡被滚动，而您转到另一个选项卡，则顶部将出现空白

使用本机碱基
import React，{Component}来自“React”；
从“react native”导入{动画、尺寸、平台、文本、TouchableOpacity、视图}；
从“本机库”导入{Body，Header，List，ListItem as Item，ScrollableTab，Tab，TabHeading，Tabs，Title}；
从“反应本机线性渐变”导入LinearGradient；
const{width:SCREEN_width}=Dimensions.get（“窗口”）；
const IMAGE_HEIGHT=250；
const HEADER_HEIGHT=Platform.OS==“ios”？64:50；
常量滚动高度=图像高度-标题高度；
const THEME_COLOR=“rgba（85186255，1）”；
常量褪色主题颜色=“rgba（85186255，0.8）”；
导出默认类ParallaxDemo扩展组件{
nScroll=新的动画值（0）；
滚动=新动画。值（0）；
textColor=this.scroll.interpolate({
输入范围：[0，滚动高度/5，滚动高度]，
输出范围：[主题颜色，褪色主题颜色，“白色”]，
外推：“夹具”
});
tabBg=this.scroll.interpolate({
输入范围：[0，滚动高度]，
输出范围：[“白色”，主题颜色]，
外推：“夹具”
});
tabY=this.nScroll.interpolate({
输入范围：[0，滚动高度，滚动高度+1]，
输出范围：[0,0,1]
});
headerBg=this.scroll.interpolate({
输入范围：[0，滚动高度，滚动高度+1]，
输出范围：[“透明”，“透明”，主题颜色]，
外推：“夹具”
});
imgScale=this.nScroll.interpolate({
输入范围：[-25,0]，
输出范围：[1.1,1]，
右外推器：“夹具”
});
imgOpacity=this.nScroll.interpolate({
输入范围：[0，滚动高度]，
outputRange:[1,0]，
});
tabContent=（x，i）=>
{
这个.heights[i]=高度；
如果（this.state.activeTab==i）this.setState（{height}）
}}>
{new Array（x）.fill（null）.map（（{，i）=>Item{i}}
;
高度=[500500]；
状态={
活动选项卡：0，
身高：500
};
建造师（道具）{
超级（道具）；
this.nScroll.addListener（Animated.event（[{val
import React, {Component} from "react";
import {Animated, Dimensions, Platform, Text, TouchableOpacity, View} from "react-native";
import {Body, Header, List, ListItem as Item, ScrollableTab, Tab, TabHeading, Tabs, Title} from "native-base";
import LinearGradient from "react-native-linear-gradient";

const {width: SCREEN_WIDTH} = Dimensions.get("window");
const IMAGE_HEIGHT = 250;
const HEADER_HEIGHT = Platform.OS === "ios" ? 64 : 50;
const SCROLL_HEIGHT = IMAGE_HEIGHT - HEADER_HEIGHT;
const THEME_COLOR = "rgba(85,186,255, 1)";
const FADED_THEME_COLOR = "rgba(85,186,255, 0.8)";

export default class ParallaxDemo extends Component {
  nScroll = new Animated.Value(0);
  scroll = new Animated.Value(0);
  textColor = this.scroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT / 5, SCROLL_HEIGHT],
    outputRange: [THEME_COLOR, FADED_THEME_COLOR, "white"],
    extrapolate: "clamp"
  });
  tabBg = this.scroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT],
    outputRange: ["white", THEME_COLOR],
    extrapolate: "clamp"
  });
  tabY = this.nScroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT + 1],
    outputRange: [0, 0, 1]
  });
  headerBg = this.scroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT + 1],
    outputRange: ["transparent", "transparent", THEME_COLOR],
    extrapolate: "clamp"
  });
  imgScale = this.nScroll.interpolate({
    inputRange: [-25, 0],
    outputRange: [1.1, 1],
    extrapolateRight: "clamp"
  });
  imgOpacity = this.nScroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT],
    outputRange: [1, 0],
  });
  tabContent = (x, i) => <View style={{height: this.state.height}}>
    <List onLayout={({nativeEvent: {layout: {height}}}) => {
      this.heights[i] = height;
      if (this.state.activeTab === i) this.setState({height})
    }}>
      {new Array(x).fill(null).map((_, i) => <Item key={i}><Text>Item {i}</Text></Item>)}
    </List></View>;
  heights = [500, 500];
  state = {
    activeTab: 0,
    height: 500
  };

  constructor(props) {
    super(props);
    this.nScroll.addListener(Animated.event([{value: this.scroll}], {useNativeDriver: false}));
  }

  render() {
    return (
      <View>
        <Animated.View style={{position: "absolute", width: "100%", backgroundColor: this.headerBg, zIndex: 1}}>
          <Header style={{backgroundColor: "transparent"}} hasTabs>
            <Body>
            <Title>
              <Animated.Text style={{color: this.textColor, fontWeight: "bold"}}>
                Tab Parallax
              </Animated.Text>
            </Title>
            </Body>
          </Header>
        </Animated.View>
        <Animated.ScrollView
          scrollEventThrottle={5}
          showsVerticalScrollIndicator={false}
          onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.nScroll}}}], {useNativeDriver: true})}
          style={{zIndex: 0}}>
          <Animated.View style={{
            transform: [{translateY: Animated.multiply(this.nScroll, 0.65)}, {scale: this.imgScale}],
            backgroundColor: THEME_COLOR
          }}>
            <Animated.Image
              source={{uri: "https://upload.wikimedia.org/wikipedia/commons/c/c5/Moraine_Lake_17092005.jpg"}}
              style={{height: IMAGE_HEIGHT, width: "100%", opacity: this.imgOpacity}}>
              {/*gradient*/}
              {/* <LinearGradient
                colors={["rgba(255,255,255,0.9)", "rgba(255,255,255,0.35)", "rgba(255,255,255,0)"]}
                locations={[0, 0.25, 1]}
                style={{position: "absolute", height: "100%", width: "100%"}}/> */}
            </Animated.Image>
          </Animated.View>
          <Tabs
            prerenderingSiblingsNumber={3}
            onChangeTab={({i}) => {
              this.setState({height: this.heights[i], activeTab: i})
            }}
            renderTabBar={(props) => <Animated.View
              style={{transform: [{translateY: this.tabY}], zIndex: 1, width: "100%", backgroundColor: "white"}}>
              <ScrollableTab {...props}
                             renderTab={(name, page, active, onPress, onLayout) => (
                               <TouchableOpacity key={page}
                                                 onPress={() => onPress(page)}
                                                 onLayout={onLayout}
                                                 activeOpacity={0.4}>
                                 <Animated.View
                                   style={{
                                     flex: 1,
                                     height: 100,
                                     backgroundColor: this.tabBg
                                   }}>
                                   <TabHeading scrollable
                                               style={{
                                                 backgroundColor: "transparent",
                                                 width: SCREEN_WIDTH / 2
                                               }}
                                               active={active}>
                                     <Animated.Text style={{
                                       fontWeight: active ? "bold" : "normal",
                                       color: this.textColor,
                                       fontSize: 14
                                     }}>
                                       {name}
                                     </Animated.Text>
                                   </TabHeading>
                                 </Animated.View>
                               </TouchableOpacity>
                             )}
                             underlineStyle={{backgroundColor: this.textColor}}/>
            </Animated.View>
            }>
            <Tab heading="Tab 1">
              {this.tabContent(30, 0)}
            </Tab>
            <Tab heading="Tab 2">
              {this.tabContent(15, 1)}
            </Tab>
          </Tabs>
        </Animated.ScrollView>
      </View>
    )
  }
}