单击React Native on Web时文本输入周围的边框

pbwdgjma 于 2023-01-27 发布在 React

关注(0)|答案(3)|浏览(159)

我正在使用React Native和TextInputs。当我点击TextInput时，它周围有一个边框。当我点击关闭时，边框消失了。这种情况不会发生在Android上，但会发生在Web上。下面是一些图片。我如何才能摆脱这个边框？
未单击时：

单击时：

浏览器：Chrome 84
操作系统：Windows 10
博览会版本：3.26.1
React本地版本：4.12.0
节点版本：版本12.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，这个也不起作用。

react-native

来源：https://stackoverflow.com/questions/63716950/border-around-text-input-when-clicked-in-react-native-on-web

3条答案

按热度按时间

uidvcgyl1#

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

outlineStyle: 'none'

**注意：**如果您没有更好的替代方案，则删除轮廓对于辅助功能来说不是一个好主意。https://css-irl.info/accessibly-hiding-focus-outlines/

赞(0）回复(0）举报 2023-01-27

brccelvz2#

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：