如何在 React Native 的水平 ScrollView 中放置一个粘性 Touchable？

Question

我正在尝试做一个简单的application/game来学习和实践React Native。目前，我正在尝试创建一个粘性 TouchableNativeFeedback，它在我使用 ScrollView 时随屏幕移动。

想法是，屏幕的左半边会将角色向左移动，屏幕的右半边会将其向右移动。我希望这些控件固定在显示器中而不移动。

这是开始的样子

这是稍微移动了scrollView后的效果

我最初尝试在滚动时更改 style.left 的值，但这似乎不是 good/stable 解决方案。

这是当前代码：

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 使他们的 headers 粘在 ScrollView 上方，这非常方便，但在这种情况下我不确定如何继续。 Articles/Questions:

http://docs.nativebase.io/docs/examples/StickyHeaderExample.html

Answer 1

解决我问题的方法是将 TouchableNativeFeedback 置于 class 之外。问题中的 class 称为 Background，它在称为 App.

的 class 中呈现

  <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>

如您所见，一旦我将其移动到此处，它就位于我想要的位置，即使我移动屏幕也是如此。好的做法是将它带到另一个组件 class 然后只调用它的一个实例。

感谢 John Ruddell 在提出解决方案时提供的帮助

如何在 React Native 的水平 ScrollView 中放置一个粘性 Touchable？

How to put a sticky Touchable within an horizontal ScrollView in React Native?

javascript

sticky

scrollview

reactjs

react-native