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

Question

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

未点击时：

点击时：

浏览器：Chrome 84
OS: Windows 10
世博会版本：3.26.1
反应本机版本：4.12.0
节点版本：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' 将执行其他人在评论中提到的技巧。我用你的 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>
        );
    }

我还在video/gif下面添加了：

Answer 2

outline: 'none' 不再有效。相反，我们可以使用

outlineStyle: 'none'

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

Border Around Text Input When Clicked in React Native on Web

textinput

react-native