反应本机:TouchableOpacity onPress滚动视图内的问题

我正在运行原生0.24.1,并且当它被放置在<ScrollView>时,我遇到<TouchableOpacity>组件的问题。

它的onPress事件火好,但有一个特殊情况,当他们不。 如果与<TouchableOpacity>组件一起您有一个<TextInput> ,并且当前焦点位于<TextInput>框中,那么您可以单击<TouchableOpacity> ,您将看到它的onPress事件不会被触发。

至less你第一次这样做。 一旦焦点不再在<TextInput> ,现在可以按下<TouchableOpacity>组件,它的onPress事件就会触发。

请注意,如果<TouchableOpacity>组件放置在<View>而不是<ScrollView>所有function都按预期工作,上述问题不适用。

下面是一些代码来演示这个问题:

 const React = require('react-native'); const { Component, Dimensions, View, ScrollView, Text, TextInput, TouchableOpacity, } = React; // ---------------------------------------------------------------------------- class TouchableOpacityTest extends Component { constructor(props, context) { super(props, context); this.state = {count_onPress:0,count_onPressIn:0,count_onPressOut:0,count_onLongPress:0}; } // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ onPressEvent(what,e) { console.log('what:',what); let newState = {}; newState['count_'+what] = ++this.state['count_'+what]; this.setState(newState); } // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ render() { let touchableProps = { onPress: this.onPressEvent.bind(this,'onPress'), onPressIn: this.onPressEvent.bind(this,'onPressIn'), onPressOut: this.onPressEvent.bind(this,'onPressOut'), onLongPress: this.onPressEvent.bind(this,'onLongPress'), } return ( <View style={{flex:1,flexDirection:'column',justifyContent:'flex-start',alignItems:'center',backgroundColor:'blue'}} > <ScrollView style={{width:Dimensions.get('window').width*0.9,backgroundColor:'red'}}> <TextInput style={{backgroundColor:'rgb(200,200,200)',marginTop:14}} placeholder="Focus on me,hide keyboard,and click on text below" autoCorrect={false} /> <TouchableOpacity {...touchableProps} > <Text style={{fontSize:20,backgroundColor:'pink',marginTop:14}}> Click on me!{"\n"} onPress:{this.state.count_onPress}{"\n"} onPressIn:{this.state.count_onPressIn}{"\n"} onPressOut:{this.state.count_onPressOut}{"\n"} onLongPress:{this.state.count_onLongPress}{"\n"} </Text> </TouchableOpacity> </ScrollView> </View> ); } // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ } // ---------------------------------------------------------------------------- AppRegistry.registerComponent('react_native_app1', () => TouchableOpacityTest); 

你可以用上面代码中的<View>组件代替<ScrollView> ,你会看到每次都会触发onPress事件,即使当焦点位于<TextView>

注意:我正在使用Android。 我不知道这是否也发生在iOS上。

注2:根据Aakash Sigdel的说法,这也确实发生在iOS上。

Solutions Collecting From Web of "反应本机:TouchableOpacity onPress滚动视图内的问题"

ScrollView上设置keyboardShouldPersistTaps={true}

重复的答案在这里: https : //stackoverflow.com/a/34290788/29493

更新:正如Hossein在他的回答中所写的, true|false在新版本中已经被弃用,而且always|never|handled

keyboardShouldPersistTaps='always'为您的ScrollView道具。

React Native文档:

“从不” (默认),当键盘处于closures状态时,在对焦文本input之外轻敲键盘。 发生这种情况时,儿童不会收到水龙头。

“总是” ,键盘不会自动closures,滚动视图不会自动触发,但滚动视图的子项可以捕捉到水龙头。

'处理'时 ,当水龙头被儿童处理时(或由祖先捕获),键盘不会自动解除。

,不推荐使用,而是使用“永不”。

真正的 ,不推荐使用,而是使用“总是”。