Question

我正在运行反应原生0.24.1，当我将<TouchableOpacity>组件置于<ScrollView>内时，我遇到了问题。

它的 onPress 事件很好，但有一个特殊情况，他们没有。如果<TouchableOpacity>组件与<TextInput>组合在一起，并且当前焦点位于<TextInput>框中，那么您可以点击<TouchableOpacity>，然后您会看到< strong> onPress 事件不会被解雇。

至少第一次这样做。一旦焦点不在<TextInput>上，您现在可以按下<TouchableOpacity>组件，其 onPress 事件将会正常启动。

请注意，如果<TouchableOpacity>组件放在<View>而不是<ScrollView>内，一切都按预期工作，上述问题不适用。

以下是一些演示此问题的代码：

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

您可以使用上述代码中的<ScrollView>组件替换<View>，并且您会看到每次都会触发 onPress 事件，即使焦点位于{ {1}}

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

注意2： 根据Aakash Sigdel的说法，这确实也发生在iOS上。

Answer 1

在keyboardShouldPersistTaps={true}上设置ScrollView。

这里重复回答：https://stackoverflow.com/a/34290788/29493

更新：正如Hossein在回答中写道，true|false已在新版本中弃用，而不是always|never|handled。

Answer 2

将keyboardShouldPersistTaps='always'设置为ScrollView道具。

反应原生文档：

'never'（默认设置），在键盘启动时点击焦点文本输入外部，取消键盘。发生这种情况时，孩子们不会收到水龙头。

'总是'，键盘不会自动关闭，滚动视图也不会捕捉到点击，但滚动视图的子节点可以捕捉到点击。

'处理'，当孩子处理点击时（或由祖先捕获），键盘不会自动解除。

false ，已弃用，请改用“never”。

true ，已弃用，请改为使用“始终”。

Answer 3

就我而言，我使用的是 alignItems：'baseline'，当我切换到 alignItems：'center'时，它开始平稳运行。不知道为什么

React Native：ScrollView中的TouchableOpacity onPress问题

3 个答案: