React Native中border-left/right-color不生效问题求助

在React Native Android模拟器里，TextInput的左右边框颜色不生效是因为Android端TextInput的边框渲染逻辑问题——当你设置了统一的borderWidth后，单独的border-left-color/border-right-color会被全局的borderColor覆盖，而且TextInput本身的边框是作为整体绘制的，不像View那样支持独立设置各方向边框颜色。

给你两个可行的解决办法：

方法一：拆分边框宽度和颜色的设置 #

不要用统一的border-width，而是分别设置四个方向的边框宽度和默认颜色，之后再单独覆盖左右边框的颜色。修改后的代码如下：

import styled, { css } from 'styled-components/native'
import { TextInput as NativeTextInput } from 'react-native'
import theme from '../components/theme'

const formFieldBaseStyle = css`
  background-color: ${theme.colors.appBackground};
  margin: 5px;
  padding: 5px;
  // 拆分四个方向的边框宽度和默认颜色
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-color: ${theme.colors.borderLight};
  border-bottom-color: ${theme.colors.borderLight};
  border-left-color: ${theme.colors.borderLight};
  border-right-color: ${theme.colors.borderLight};
`

const TextInput = styled(NativeTextInput).attrs({
  placeholderTextColor: theme.colors.textSecondary,
})`
  ${formFieldBaseStyle}
  color: ${theme.colors.textPrimary};
  font-size: ${theme.fontSizes.body};
  padding-left: 10px;
  padding-right: 10px;
  // 单独覆盖左边框颜色
  border-left-color: #F00;
`

方法二：用View包裹TextInput（更稳定） #

因为View组件在Android上的边框渲染逻辑更可靠，支持独立设置各方向边框颜色，所以可以把TextInput放在一个带边框的View里，TextInput本身只处理文本相关样式：

import styled from 'styled-components/native'
import { TextInput as NativeTextInput, View } from 'react-native'
import theme from '../components/theme'

// 给View设置边框样式
const TextInputWrapper = styled.View`
  background-color: ${theme.colors.appBackground};
  margin: 5px;
  padding: 5px;
  border-width: 1px;
  border-color: ${theme.colors.borderLight};
  border-left-color: #F00;
`

// TextInput只处理文本样式，去掉边框相关设置
const TextInput = styled(NativeTextInput).attrs({
  placeholderTextColor: theme.colors.textSecondary,
})`
  flex: 1;
  color: ${theme.colors.textPrimary};
  font-size: ${theme.fontSizes.body};
  padding-left: 10px;
  padding-right: 10px;
`

// 使用示例
// <TextInputWrapper>
//   <TextInput placeholder="请输入内容" />
// </TextInputWrapper>

这两种方法都能解决Android端TextInput左右边框颜色不生效的问题，方法二更推荐，因为避免了TextInput本身的样式限制。

内容的提问来源于stack exchange，提问作者Crossoni