React Native Paper TextInput在Android 11设备上无法显示问题求助

问题详情 #

基于React Native Paper实现的Outline样式自定义TextInput组件，在Android 11设备上无法正常显示——非聚焦状态下完全不可见，仅当输入框获得焦点时才能看到组件轮廓。

自定义组件代码：

const TextInput = ({...props }) => (
 <View style={styles.container}>
  <Input
    style={styles.input}
    selectionColor={colors.black}
    underlineColor="transparent"
    mode="outlined"
    autoCapitalize="none"
    activeOutlineColor={colors.black60}
    {...props}
   />
  </View> 
 );

const styles = StyleSheet.create({
  container: {
    width: '100%',
    // marginBottom: 5,
  },
 input: {
   backgroundColor: colors.white,
   fontSize: commonTheme.TEXT_SIZE_DEFAULT,
   fontFamily: globals.RobotoRegular,
 },
});

export default TextInput;

主组件调用代码：

<TextInput
  label="Email"
  value={values.email}
  keyboardType="email-address"
  placeholder="Enter Address"
  onChangeText={handleChange('email')}
  onBlur={handleBlur('email')}
  textContentType="emailAddress"
 />

解决思路及方案 #

1. 显式设置非聚焦状态外边框颜色 #

核心问题是未指定outlineColor属性，React Native Paper的Outlined模式下，非聚焦状态的外边框默认颜色可能与组件背景色（此处为白色）一致，导致视觉上不可见。添加该属性并指定对比色即可解决：

<Input
  style={styles.input}
  selectionColor={colors.black}
  underlineColor="transparent"
  mode="outlined"
  autoCapitalize="none"
  activeOutlineColor={colors.black60}
  outlineColor={colors.grey20} // 新增：设置非聚焦时的外边框颜色
  {...props}
/>

2. 移除可能冲突的背景色设置 #

若组件背景色与外边框默认色叠加导致显示异常，可尝试注释或移除input样式中的backgroundColor：

input: {
  // backgroundColor: colors.white, 暂时注释该行
  fontSize: commonTheme.TEXT_SIZE_DEFAULT,
  fontFamily: globals.RobotoRegular,
},

3. 升级React Native Paper版本 #

部分旧版本的React Native Paper在Android 11上存在Outlined Input显示bug，升级到最新稳定版即可修复：

npm install react-native-paper@latest
# 或使用yarn
yarn add react-native-paper@latest

4. 排查父容器遮挡问题 #

检查父容器container样式，确保没有overflow: hidden等可能裁剪组件轮廓的属性：

container: {
  width: '100%',
  // 移除或避免添加overflow: hidden等遮挡属性
},

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