fix: Button onPress cannot be triggered using keyboard space · Pull Request !557 · OpenHarmony-SIG/ohos_react_native

1. fix: Button onPress cannot be triggered using keyboard space
---

## 描述

解决在使用键盘进行操作，在Button获焦时候使用空格键互动无法触发onPress事件的问题。

## 变更日志

- added View组件的focus属性对接
- added 在Button组件的内层View中设置focusable为false，使得走焦在走到Button时焦点停留在外侧Pressable上

## 测试步骤

1. 打开Tester工程.
2. 添加如下测试代码，执行npm run start命令.

```
// App.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button, TouchableOpacity, Switch, Pressable, StyleSheet } from 'react-native';

export default function FocusTest() {
  const [text, setText] = useState('');
  const [isSwitchOn, setIsSwitchOn] = useState(false);

const handleTextChange = (value) => {
    console.log('TextInput Changed:', value);
    setText(value);
  };

const handleButtonPress = () => {
    console.log('zicion: Button Pressed');
  };

const handleTouchableOpacityPress = () => {
    console.log('zicion: TouchableOpacity Pressed');
  };

const handleSwitchToggle = (value) => {
    console.log('zicion: Switch Toggled:', value);
    setIsSwitchOn(value);
  };

const handlePressablePress = () => {
    console.log('zicion: Pressable Pressed');
  };

return (
    <View style={styles.container}>
      <Text style={styles.label}>Enter Text:</Text>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={handleTextChange}
        placeholder="Type something..."
      />

<TouchableOpacity style={styles.touchable} onPress={handleTouchableOpacityPress} onFocus={handleTouchableOpacityPress}>
        <Text style={styles.touchableText}>TouchableOpacity</Text>
      </TouchableOpacity>

<View style={styles.switchContainer}>
        <Text>Switch:</Text>
        <Switch value={isSwitchOn} onValueChange={handleSwitchToggle} />
      </View>

<Pressable style={styles.pressable} onPress={handlePressablePress}>
        <Text style={styles.pressableText}>Pressable</Text>
      </Pressable>

<View style={styles.viewStyle}>
        <Text style={styles.pressableText}>View</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    width: '100%',
    marginBottom: 20,
  },
  touchable: {
    backgroundColor: '#007bff',
    padding: 10,
    borderRadius: 5,
    marginVertical: 10,
  },
  touchableText: {
    color: '#fff',
    fontSize: 16,
  },
  switchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
  },
  pressable: {
    backgroundColor: '#28a745',
    padding: 10,
    borderRadius: 5,
    marginVertical: 10,
  },
  pressableText: {
    color: '#fff',
    fontSize: 16,
  },
  viewStyle: {
    backgroundColor: '#28a745',
    padding: 10,
    borderRadius: 5,
    marginVertical: 10,
  }
});
```

3. 在使用Tab走焦到Button上的时候，使用空格交互能够成功打印日志：'zicion: Button Pressed'

## 合入前自检

- [x] 不涉及非兼容性变更；若涉及，已通过相应评审。
- [x] 不涉及性能或已进行性能测试且无性能劣化。
- [x] 符合对应的编码规范。
- [x] 不涉及文档更新，或已更新了文档。
- [x] 针对可测试性要求，已增加必要的自测用例、合理的日志记录或Trace信息。
- [x] 不存在非法的文件引入，包括图片和代码等

类型	指派人员	状态
审查	hyh 江汉 quwyts zichenyang	进行中 (0/2人)
测试	openharmony_ci	进行中 (0/1人)

OpenHarmony-SIG/ohos_react_native关闭 .gitee-modal { width: 500px !important; }

搜索帮助

OpenHarmony-SIG/ohos_react_native
关闭