我正在尝试制作一个简单的应用程序/游戏来学习和练习React Native。当前,我正在尝试创建一个粘滞的TouchableNativeFeedback,该粘滞TouchableNativeFeedback在使用ScrollView时随屏幕移动。
这个想法是,屏幕的左半部分将字符向左移动,屏幕的右半部分将字符向右移动。我希望这些控件固定在显示屏上而不移动。
这就是它的开始
这是在移动scrollView后
我最初尝试在滚动时更改style.left的值,但这似乎不是一个好的/稳定的解决方案。
这是当前代码:
render() {
return (
<ScrollView
//onScroll={this._onScroll}
ref={(scrollView) => { this.scrollView = scrollView; }}
style={styles.container}
horizontal= {true}
snapToAlignment={"center"}
>
<View style={styles.wrapperView}>
<ImageBackground
style={styles.container}
source={require('../images/second.png')}
>
<TouchableNativeFeedback onPressIn={this._onPressButton} onPressOut={this._onPressButton}>
<View style={
{
width: width/2,
height: '100%',
position: 'absolute',
left: this.state.touchableLeft,
backgroundColor: 'red',
}
}>
</View>
</TouchableNativeFeedback>
... (code about the character)
</ImageBackground>
</View>
</ScrollView>
);
}
和样式代码
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
},
wrapperView:{
width: width*3 + 300,
},
});
并仅供参考,这是我最初尝试的方法:
_onScroll = (event) => {
this.setState( {
touchableLeft: this.state.touchableLeft + event.nativeEvent.contentOffset.x
} )
}
我看过以下问题和文章,但是我无法真正找到对我有帮助的解决方案。通常,人们使用flex将其标头粘贴在ScrollView上方,这非常方便,但是在这种情况下,我不确定如何继续操作。文章/问题:
How to Get ListView Section Header to Stick
http://docs.nativebase.io/docs/examples/StickyHeaderExample.html
Sticky Component inside scrollview
最佳答案
解决我问题的方法是将TouchableNativeFeedback带到课堂之外。该问题中的类称为Background,并且在名为App的类中呈现。
<View style={styles.container}>
<Background />
<TouchableNativeFeedback onPressIn={this._onPressButton} onPressOut={this._onPressButton}>
<View style={
{
width: '50%',
height: '100%',
position: 'absolute',
left:0,
//left: this.state.touchableLeft,
//backgroundColor: 'red',
}
}>
</View>
</TouchableNativeFeedback>
</View>
如您所见,一旦我将其移到此处,即使我移动了筛网,它也就定位在我想要的位置。好的做法是将其带到另一个组件类,然后仅调用它的一个实例。
感谢John Ruddell在提出解决方案时所提供的帮助