我正在尝试制作一个简单的应用程序/游戏来学习和练习React Native。当前,我正在尝试创建一个粘滞的TouchableNativeFeedback,该粘滞TouchableNativeFeedback在使用ScrollView时随屏幕移动。

这个想法是,屏幕的左半部分将字符向左移动,屏幕的右半部分将字符向右移动。我希望这些控件固定在显示屏上而不移动。

这就是它的开始

javascript - 如何在React Native的水平ScrollView中放置粘性Touchable?-LMLPHP

这是在移动scrollView后

javascript - 如何在React Native的水平ScrollView中放置粘性Touchable?-LMLPHP

我最初尝试在滚动时更改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在提出解决方案时所提供的帮助

09-28 13:43
查看更多