当我在react-native中设置borderLeftWidth = 1时，为什么会出现间隙？

Question

我有以下反应本机代码，它完全符合我的要求，因为它打印出一个纯黑色矩形：

      getTable() {
            const cell = {
            backgroundColor:'black',
            flex:1,
            height:50,

            };
            const table = {
            borderColor:'black',
            borderLeftWidth:0,
            borderRightWidth:0,
            borderTopWidth:0,
            borderBottomWidth:0,
            width:'100%'};
            return (
                    <View style={table}>
                            <View style={{flexDirection:"row"}}>
                                    <View style={cell}></View>
                                    <View style={cell}></View>
                                    <View style={cell}></View>
                            </View>
                    </View>
            );
    }

但是，当我将table.borderLeftWidth更改为值1时，我会看到黑框左侧66％的白色垂直线，如下图所示：

为什么在容器中添加边框会导致内部内容出现白线？

所有iOS设备和所有iOS模拟设备都会出现此问题。它不会出现在Android中。我做错了什么？

Answer 1

基于此问题仅发生在iOS设备上的事实，我怀疑它是iOS实现的问题。 GitHub上的react-native issue #2089似乎与您遇到的类似。

问题在于反应原生的iOS设备上的CSS“实现”（因为它实际上不是CSS），而且它只是一个渲染错误（可能是使用flexbox）。我建议你在那里发布你的问题，看看他们是否可以解决它。