在 Web 上的 React Native 中单击时文本输入的边框

Question

我正在使用 React Native 和 TextInputs。当我点击它时，TextInput 周围有一个边框。当我点击关闭时，边框消失。这不会发生在 Android 上，但会发生在网络上。下面是一些图片。我怎样才能摆脱这个边界？

未点击时：

点击时：

浏览器：Chrome 84
操作系统：Windows 10
Expo 版本：3.26.1
React Native 版本：
4.12.0 Nodejs 版本：v12.18.3 Npm
版本：6.14.6

最小可重现示例：https : //snack.expo.io/@ketzoomer/dfbbdf

import * as React from 'react';
import { View, Text, TextInput } from 'react-native';

class Sign_Up extends React.Component {

    constructor() {
        super();
        
        this.state = {
        };
    }

    render() {
        return (
            <View>
                <Text>
                    First Name:
                    <TextInput
                        style={{ paddingVertical: 0, borderBottomWidth: 1, marginLeft: 5 }}
                        value={this.state.firstName}
                        onChangeText={(firstName) => this.setState({ firstName: firstName })}
                        placeholder="First Name"
                    />
                </Text> 
            </View>
        );
    }
}

export default Sign_Up;

我试过的：

我试过了outline: 0，但没有用。

我试过了outlineWidth: 0，但没有用。

我试过了borderWidth: 0，这也不起作用。

Answer 1

outline: 'none'不再工作了。相反，我们可以使用

outlineStyle: 'none'

注意： 如果您没有更好的替代方案，则删除轮廓对于可访问性来说并不是一个好主意。 https://css-irl.info/accessibility-hiding-focus-outlines/

Answer 2

outline: 'none'会像其他人在评论中提到的那样做。我试过你的snack，它似乎有效。这是编辑：https : //snack.expo.io/ro0icIt!6。看下面的代码：

render() {
        return (
            <View>
                <Text>
                    First Name:
                    <TextInput
                        style={{ paddingVertical: 0, outline: 'none', borderBottomWidth: 1, marginLeft: 5 }}
                        value={this.state.firstName}
                        onChangeText={(firstName) => this.setState({ firstName: firstName })}
                        placeholder="First Name"
                    />
                </Text> 
            </View>
        );
    }

我还在视频/gif下面添加了：