reactjs - react native : onBlur fires after 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,
  },
});