如何解决当父级ScrollView停止滚动时，子级ScrollView不滚动
在我绘制的图像中，您可以看到两个区域，黄色区域是ScrollView，红色区域是平面列表。 当我从红色区域滚动时，我希望选项卡升至标题，一旦它们触及标题，就开始滚动FlatList的红色区域。 要做到这一点，当标签触碰我从黄区设置为false的scrollEnabled头，问题是，直到我停止再次按下，并按下红色区域不会滚动。
我希望它有行为类似于Instagram的个人资料，其中有一些选项卡，然后的照片列表，当标签触碰头，你可以继续从图像的滚动操作。
解决方法
我将添加一些选项
- 第一个是小吃，它再次使用父级和子级scrollviews Collapsible Header Tabs Snack
问题：这在Android上存在问题。父级和子级滚动视图都滚动时，android上的滚动结结。
- 第二个是github仓库React-Native-Collapsing-TabView
问题：如果滚动其中一个标签，然后转到另一个标签，则顶部会有空白。issue
- 使用Native Base。
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,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,outputRange: ["white",THEME_COLOR],extrapolate: "clamp"
});
tabY = this.nScroll.interpolate({
inputRange: [0,SCROLL_HEIGHT,SCROLL_HEIGHT + 1],outputRange: [0,1]
});
headerBg = this.scroll.interpolate({
inputRange: [0,outputRange: ["transparent","transparent",extrapolate: "clamp"
});
imgScale = this.nScroll.interpolate({
inputRange: [-25,0],outputRange: [1.1,1],extrapolateRight: "clamp"
});
imgOpacity = this.nScroll.interpolate({
inputRange: [0,outputRange: [1,});
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,opacity: this.imgOpacity}}>
{/*gradient*/}
{/* <LinearGradient
colors={["rgba(255,0.9)","rgba(255,0.35)",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,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>
)
}
}
问题：所有屏幕由于相同的偏移而滚动
- 第四是一个模块Sticky parallax header，您可以在此处使用标签式标题
问题：由于其模块没有很大的自定义空间，但是有足够的空间。而且当我使用它时，还有一些问题，例如由于相同的偏移而导致所有屏幕滚动，现在可能已经解决了。
因此，从根本上讲，所有这些都具有一些问题，您稍后需要解决。 但是我建议使用netguru的sticky-parallax-header的第四个选项。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。