反应 - 原生Android嵌套的滚动视图和ListView不及格控制对方 [英] react-native android nested scrollview and listview not passing control to each other
问题描述
在反应-原生Android，当我们有嵌套滚动视图和ListView，则控制不是从滚动视图传递到ListView和反之亦然..
https://www.youtube.com/watch?v=oC2iHhw3Ddk
这是链接到我试图在视频剪辑中，实现了互动。所以，我使用的childscroll父滚动和ListView滚动视图滚动视图..应该有控制，直到列表视图亘古不到达山顶，随着列表视图达到它应有的控制上，并认为应该坚持在上面。我曾试图弥补它作为列表视图头的一部分，但是，我想实现粘性不工作。另外，我还尝试在父滚动视图使用onScroll，当它达到一个特定的值，我想禁用它并启用列表视图scrolling.For，我试过了，通过onStartShouldSetResponder，onMoveShouldSetResponder道具，设置和值，为状态变量。但是，onStartShouldSetResponder，onMoveShouldSetResponder DONOT与滚动视图和ListView回应。请告诉我怎样才能做到这一点的互动。
＆LT;景观风格= {{柔性：1}}＆GT;
＆LT;滚动型showsVerticalScrollIndicator = {TRUE}
onResponderTerminationRequest = {（EVT）=＆GT真}
onStartShouldSetResponderCapture = {（EVT）=＆GT;假}
onMoveShouldSetResponderCapture = {（EVT）=＆GT;假}＆GT;
＆LT;景观风格= {{柔性：1}}＆GT;
＆LT;景观风格= {[styles.coverpicwrapr]}＆GT;
＆lt;图像风格= {} styles.coverpic源= {{URI：coverpic'}} /＆GT;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.tagfullwrapr，styles.borderBottomThick]}＆GT;
＆LT;景观风格= {[styles.title，styles.explore]}＆GT;
＆LT;景观风格= {[styles.smlimgoutline]}＆GT;
＆LT;景观风格= {[styles.smlimgwrapr]}＆GT;
＆lt;图像风格= {} styles.smlimg源= {{URI：'探索'}} /＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.tagWrapr]}＆GT;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagTitle]}＆GT;探索与LT; /文本＆GT;＆LT; /视图＆gt;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagDes]}＆GT;通过你的心情或prefrence＆LT; /文本＆GT;＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.optionsBlock]}＆GT;
＆LT;景观风格= {[styles.optionsRow]}＆GT;
＆LT; TouchableWithoutFeedback上preSS = {this.gotoLunchPage}＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：'午餐'}} /＆GT;
＆LT; / TouchableWithoutFeedback＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：'交货'}} /＆GT;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.optionsRow]}＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：'晚餐'}} /＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：'早餐'}} /＆GT;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.optionsRow]}＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：'饮料'}} /＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：'网吧'}} /＆GT;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.optionsRow]}＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：'奢侈'}} /＆GT;
＆lt;图像风格= {} styles.optionsPic源= {{URI：northindian'}} /＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.title，styles.orderonline，styles.borderBottomThick]}＆GT;
＆LT;景观风格= {[styles.smlimgoutline]}＆GT;
＆LT;景观风格= {[styles.smlimgwrapr]}＆GT;
＆lt;图像风格= {} styles.smlimg源= {{URI：来样订做'}} /＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.tagWrapr]}＆GT;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagTitle]}＆GT;在线订单和LT; /文本＆GT;＆LT; /视图＆gt;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagDes]}＆GT;从餐厅，提供给你＆LT; /文本＆GT;＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.rightIcon]}＆GT;
＆LT;图标名称=IOS-箭头前进大小= {25}颜色='＃A4A4A4/＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.title，styles.nearby，styles.borderBottomThick]}＆GT;
＆LT;景观风格= {[styles.smlimgoutline]}＆GT;
＆LT;景观风格= {[styles.smlimgwrapr]}＆GT;
＆lt;图像风格= {} styles.smlimg源= {{URI：'附近'}} /＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.tagWrapr]}＆GT;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagTitle]}＆GT;邻近＆LT; /文本＆GT;＆LT; /视图＆gt;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagDes]}＆GT;看到你摄氏度的近的餐馆; /文本＆GT;＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.rightIcon]}＆GT;
＆LT;图标名称=IOS-箭头前进大小= {25}颜色='＃A4A4A4/＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.title，styles.feed]}＆GT;
＆LT;景观风格= {[styles.smlimgoutline]}＆GT;
＆LT;景观风格= {[styles.smlimgwrapr]}＆GT;
＆lt;图像风格= {} styles.smlimg源= {{URI：'喂'}} /＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.tagWrapr]}＆GT;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagTitle]}＆GT;饲料＆LT; /文本＆GT;＆LT; /视图＆gt;
＆LT;视图＆gt;＆LT;文本样式= {[styles.tagDes]}＆GT;看到发生了什么事，你和周围的LT; /文本＆GT;＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.feedTabsWrapr]}＆GT;
＆LT;景观风格= {[styles.feeds，styles.activeFeedWrapr]}＆GT;
＆LT;文本样式= {[styles.localFeed，styles.activeFeed]}＆GT;当地的饲料和LT; /文本＆GT;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.feeds，styles.inactiveFeedWrapr]}＆GT;
＆LT;文本样式= {[styles.localFeed，styles.inactiveFeed]}＆gt;我的饲料和LT; /文本＆GT;
＆LT; /视图＆gt;
＆LT; /视图＆gt;
＆LT;景观风格= {[styles.scrollwrapr，{{柔性：1}}]}＆GT;
＆LT; ListView控件
数据源= {} this.state.dataSource
renderRow = {} this.renderCards
onEndReachedThreshold = {10}
onEndReached = {} this.onEndReached
renderFooter = {} this._renderFooter /＆GT;
＆LT; /视图＆gt;
＆LT; /滚动型＆GT;
＆LT; /视图＆gt;
要实现这个动画的ios只需添加stickyHeaderIndices一种方法= {2}父滚动。但是，因为stickyHeaderIndices不支持的Android，我试图通过使用滚动视图和一个ListView来实现这个动画。但是，控制不被从一个滚动视图传递到ListView控件或反之亦然。我曾尝试PanResponder，但动画是不是在那光滑。所以，请你能提出一个办法解决或添加stickyHeaderIndices作为道具的Android也??
In react-native android, when we have nested scrollview and listview, then the control is not being passed from scrollview to listview and vice-versa..
https://www.youtube.com/watch?v=oC2iHhw3Ddk this is the link to the interaction that I am trying to achieve in a video clip. So, I am using scrollview for parent scroll and listview for the childscroll.. scrollview should have the control until the listview doesnot reach the top, as the listview reaches the top it should have the control, and the view should stick on top. I have tried to make it as part of listview header, but the stickiness that i wanted to achieve did not work. Also, I have tried to use onScroll on parent scrollview and when it reaches a particular value i want to disable it and enable the listview scrolling.For that I tried, to pass onStartShouldSetResponder, onMoveShouldSetResponder as props, set and their values, as state variables. But, onStartShouldSetResponder, onMoveShouldSetResponder donot respond with scrollview and listview. Please tell me how can I achieve this interaction.
<View style={{flex:1}}>
<ScrollView showsVerticalScrollIndicator = {true}
onResponderTerminationRequest={(evt) =>true}
onStartShouldSetResponderCapture={ (evt) => false}
onMoveShouldSetResponderCapture={ (evt) => false}>
<View style={{flex:1}}>
<View style={[styles.coverpicwrapr]}>
<Image style={styles.coverpic} source={{uri: 'coverpic'}}/>
</View>
<View style={[styles.tagfullwrapr, styles.borderBottomThick]}>
<View style={[styles.title, styles.explore]}>
<View style={[styles.smlimgoutline]}>
<View style={[styles.smlimgwrapr]}>
<Image style={styles.smlimg} source={{uri: 'explore'}}/>
</View>
</View>
<View style={[styles.tagWrapr]}>
<View><Text style={[styles.tagTitle]}>Explore</Text></View>
<View><Text style={[styles.tagDes]}>By your mood or prefrence</Text></View>
</View>
</View>
<View style={[styles.optionsBlock]}>
<View style={[styles.optionsRow]}>
<TouchableWithoutFeedback onPress={this.gotoLunchPage}>
<Image style={styles.optionsPic} source={{uri: 'lunch'}}/>
</TouchableWithoutFeedback>
<Image style={styles.optionsPic} source={{uri: 'delivery'}}/>
</View>
<View style={[styles.optionsRow]}>
<Image style={styles.optionsPic} source={{uri: 'dinner'}}/>
<Image style={styles.optionsPic} source={{uri: 'breakfast'}}/>
</View>
<View style={[styles.optionsRow]}>
<Image style={styles.optionsPic} source={{uri: 'drinks'}}/>
<Image style={styles.optionsPic} source={{uri: 'cafes'}}/>
</View>
<View style={[styles.optionsRow]}>
<Image style={styles.optionsPic} source={{uri: 'luxury'}}/>
<Image style={styles.optionsPic} source={{uri: 'northindian'}}/>
</View>
</View>
</View>
<View style={[styles.title, styles.orderonline, styles.borderBottomThick]}>
<View style={[styles.smlimgoutline]}>
<View style={[styles.smlimgwrapr]}>
<Image style={styles.smlimg} source={{uri: 'orderonline'}}/>
</View>
</View>
<View style={[styles.tagWrapr]}>
<View><Text style={[styles.tagTitle]}>Order Online</Text></View>
<View><Text style={[styles.tagDes]}>From restaurants that deliver to you.</Text></View>
</View>
<View style={[styles.rightIcon]}>
<Icon name="ios-arrow-forward" size={25} color='#A4A4A4'/>
</View>
</View>
<View style={[styles.title, styles.nearby, styles.borderBottomThick]}>
<View style={[styles.smlimgoutline]}>
<View style={[styles.smlimgwrapr]}>
<Image style={styles.smlimg} source={{uri: 'nearby'}}/>
</View>
</View>
<View style={[styles.tagWrapr]}>
<View><Text style={[styles.tagTitle]}>Nearby</Text></View>
<View><Text style={[styles.tagDes]}>See restaurants near you</Text></View>
</View>
<View style={[styles.rightIcon]}>
<Icon name="ios-arrow-forward" size={25} color='#A4A4A4'/>
</View>
</View>
<View style={[styles.title,styles.feed]}>
<View style={[styles.smlimgoutline]}>
<View style={[styles.smlimgwrapr]}>
<Image style={styles.smlimg} source={{uri: 'feed'}}/>
</View>
</View>
<View style={[styles.tagWrapr]}>
<View><Text style={[styles.tagTitle]}>Feed</Text></View>
<View><Text style={[styles.tagDes]}>See what is happening around you</Text></View>
</View>
</View>
</View>
<View style={[styles.feedTabsWrapr]}>
<View style={[styles.feeds,styles.activeFeedWrapr]}>
<Text style={[styles.localFeed,styles.activeFeed]}>Local Feed</Text>
</View>
<View style={[styles.feeds,styles.inactiveFeedWrapr]}>
<Text style={[styles.localFeed,styles.inactiveFeed]}>My Feed</Text>
</View>
</View>
<View style={[styles.scrollwrapr,{{flex:1}}]}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderCards}
onEndReachedThreshold={10}
onEndReached={this.onEndReached}
renderFooter={this._renderFooter}/>
</View>
</ScrollView>
</View>
One way to achieve this animation in ios to simply add stickyHeaderIndices ={2} for the parent scroll. But, since stickyHeaderIndices is not supported in android, I am trying to achieve this animation by using a scrollview and a listview. But, the control is not being passed from one scrollview to listview or vice-versa. I have tried PanResponder, but the animation is not smooth in that. So, please could you suggest a way around or add stickyHeaderIndices as props for android also??
这篇关于反应 - 原生Android嵌套的滚动视图和ListView不及格控制对方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
