Javascript 如何在React Native中的水平滚动视图中放置粘性触摸屏？

我正在尝试制作一个简单的应用程序/游戏来学习和练习React Native。目前，我正在尝试创建一个粘性TouchableNativeFeedback，当我使用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>
    );
  }

作为参考，这是我最初尝试的：

_onScroll = (event) => {
    this.setState( {
        touchableLeft: this.state.touchableLeft + event.nativeEvent.contentOffset.x
     } )
}

我看过以下问题和文章，但我真的找不到一个对我有帮助的解决方案。通常人们使用flex使他们的标题在ScrollView上保持粘性，这非常方便，但在这种情况下，我不确定如何继续。文章/问题：

---

解决我问题的方法是在课堂外获取可触摸的本地反馈。问题中的类称为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在提出解决方案时提供的帮助

为什么不让它们绝对定位在屏幕上，而不知道滚动位置或其他什么？我想我知道你的意思，这可能是我太傻了，我会在2天内尝试一下，然后再访问我的代码。如果我能修复它，我会发布解决方案。我将可触摸部分放在ScrollView之外，并尝试将位置设置为绝对，但这只会使其从视图中消失。OK，尝试将触摸组件放在滚动组件之后或之前。。这听起来像是一个元素的秩序，在更高的层次上。。。还可以尝试在touch Components Sweet上添加更高的zindex！很高兴我能帮你：）

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