react-native - 可触摸的不透明度事件处理停止在高程上工作

Question

我有一个固定的标题组件，上面有一个可触摸的不透明度，它可以工作。它的高度设置为 10。在它下面我有一个视图，我在固定标题下向上滚动。它的高度设置为 0。只要视图在固定标题下滚动，我就会丢失固定标题上的所有触摸事件。

我假设事件正在通过标题向下传播到滚动视图，但不知道如何阻止它？

我试图通过在标题上设置 onStartShouldSetResponder 来处理这个问题，但这没有帮助。

零件：

<View style={{ flex: 1, flexDirection: 'column' }} >
    <Header {...this.props} />
        <Collapsible max={160} min={0} renderHeader={<MenuHeader {...params} />} 
           renderContent={<View><FlatList
                            data={menuitems}
           renderItem={({ item }) => (<MenuLineItem>{item.name}</MenuLineItem>)}}
                        /></View>}
       />                    
</View>

标题：

<View style={{flexDirection: 'row', justifyContent: 'space-between', height:88, paddingTop: 10, backgroundColor, elevation: 10}} onStartShouldSetResponder={()=>{return true;}}>               
    <TouchableOpacity underlayColor={'transparent'} onPress={() => { this.goHome(); }}>
       <View>
          <Image source={require('logo.png')} ></Image>
       </View>
    </TouchableOpacity>
</View>

标签： react-nativetouchableopacity

Answer 1

好的，我现在已经解决了如下：

<View style={{ flex: 1, flexDirection: 'column' }} >
     <Collapsible max={160} min={0} renderHeader={<MenuHeader {...params} />} 
           renderContent={<View><FlatList
                            data={menuitems}
           renderItem={({ item }) => (<MenuLineItem>{item.name}</MenuLineItem>)}}
                        /></View>}
       />
    <Header {...this.props} style={{position: 'absolute', top: 0}} />                    
</View>

因此，我将 Header 移到了滚动视图下方，然后将其绝对定位在上方。