React Native：onBlur 在 onPress 之后触发

Question

我在 ScrollView 中有一个 TouchableOpacity 和一个 TextInput，当 TextInput 聚焦时，我按下 TouchableOpacity 我想触发 首先触发 onBlur，然后触发 onPress。发生什么了？使用 keyboardShouldPersistTaps="never" 时 onPress 根本不会执行，使用 "handled" 时 onBlur 根本不会执行，输入也不会失去焦点。我注意到从'react-native-gesture-handler'而不是'react-native'导入的TouchableOpacity，并且keyboardShouldPersistTaps“从不”onPress和onBlur都会执行，但这里的问题是onBlur在onPress之后出现！有什么解决办法吗？

<ScrollView keyboardShouldPersistTaps="never">
  <TouchableOpacity onPress={() => console.log('press')}>
    <Text>Click me</Text>
  </TouchableOpacity>
  <TextInput value={value} onBlur={() => console.log('blur')} />
</ScrollView>

以字段为中心并按下可触摸的预期输出：

blur
press

编辑：更复杂的场景

//one component
<ScrollView keyboardShouldPersistTaps="handled">
  <TextInput value={value} onBlur={() => console.log('blur')} /> 
  <TextInput value={value} onBlur={() => console.log('blur')} /> 
  <TextInput value={value} onBlur={() => console.log('blur')} /> 
</ScrollView>

//another component
<TouchableOpacity onPress={() => console.log('press')}>
    <Text>Click me</Text>
</TouchableOpacity>

两个组件都将在一个更大的组件中呈现。

Answer 1

您可以使用keyboardShouldPersistTaps="handled" 并在onPress 处理程序中手动触发blur。这不是完美的解决方案，但可能就足够了。

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [value, setValue] = React.useState();
  const input = React.useRef();

  return (
    <View style={styles.container}>
      <ScrollView keyboardShouldPersistTaps="handled">
        <TouchableOpacity
          onPress={() => {
            input.current.blur();
            console.log('press');
          }}>
          <Text>Click me</Text>
        </TouchableOpacity>
        <TextInput
          ref={input}
          value={value}
          onBlur={() => console.log('blur')}
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

编辑：更复杂的场景 - 您可以使用 Keyboard 模块关闭键盘，这将自动在您的输入上触发模糊事件。

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Keyboard,
} from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [value, setValue] = React.useState();

  return (
    <View style={styles.container}>
      <ScrollView keyboardShouldPersistTaps="handled">
        <TextInput value={value} onBlur={() => console.log('blur')} />
        <TextInput value={value} onBlur={() => console.log('blur')} />
        <TextInput value={value} onBlur={() => console.log('blur')} />
      </ScrollView>
      <TouchableOpacity
        onPress={() => {
          Keyboard.dismiss();
          console.log('press');
        }}>
        <Text>Click me</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});