Question

我在React Native项目中使用styled-components，并且试图在文本组件中设置左边框。

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并重新加载应用后，它显示：“不变违规：“ borderLeft”不是有效的样式属性”。

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

Answer 1

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

您最好的做法可能是如下所示明确指定每侧的border属性值：

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;
`;

Answer 2

以下更改应该可以解决问题-

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-width: 1px;
border-left-style : solid;
border-left-color : #fff
`;

有关可用属性，请参考以下链接-

Layout Props

StyleSheetGuide

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

2 个答案: