不变违规：“borderLeft”不是有效的样式属性

Question

我在 React Native 项目中使用样式组件，并尝试在文本组件中设置左边框。

import React, { Component } from 'react';
import styled from 'styled-components';

const TitleText = (props) => {
  return (
    <Text>{props.text}</Text>
  );
};

const Text = styled.Text`
  font-family: ${props => props.theme.fontFamily};
  color: ${props => props.theme.darkBlue};
  border-left: 1px solid #000;
`;

问题是，添加border-left: 1px solid #000并重新加载应用程序后，它显示：“Invariant Violation：“borderLeft”不是有效的样式属性”。

如何使用样式化组件向该组件添加左边框？

Answer 1

我不认为可以直接在 React Native 中的组件上设置边框左（或上、右、下）样式属性。这可能是导致错误的原因，因为在 React Native 中没有到border-left任何等效样式属性的映射。

最好的方法可能是明确指定每边的边框属性值，如下所示：

const Text = styled.Text`
  font-family: ${props => props.theme.fontFamily};
  color: ${props => props.theme.darkBlue};

  /* Note that react native typically requires the same 
     border style to be applied to all sides of a component 
     that supports borders */
  border-style: solid; 

  /* Most components in react native support unique border width and 
     colors on each side of the component */
  border-left-color: #000; 
  border-left-width: 1px;
`;