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

【问题标题】：How to put a sticky Touchable within an horizontal ScrollView in React Native?如何在 React Native 的水平 ScrollView 中放置一个粘性 Touchable？
【发布时间】：2018-04-06 01:58:08
【问题描述】：

我正在尝试制作一个简单的应用程序/游戏来学习和练习 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>
    );
  }

以及样式代码

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

【问题讨论】：

为什么不让它们绝对定位到屏幕上，而与滚动位置或任何东西无关？
我想我知道你的意思，这可能只是我很愚蠢，我会在两天内再次访问我的代码时尝试。如果我能修复它，我会发布解决方案
我将 Touchable 部分放在 ScrollView 之外并尝试将位置设置为绝对位置，但这只是让它从视图中消失
好的，尝试将触摸组件放在滚动组件之后或之前.. 这听起来像是在更高层次上的元素顺序... 还可以尝试在触摸组件上放置更高的 zindex
甜蜜！很高兴我能帮你解决这个问题:)

标签： javascript reactjs react-native scrollview sticky

【解决方案1】：

解决我的问题的方法是将 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 在提出解决方案时提供的帮助

【讨论】：