设置为透明色时，ReactNativeTextInput背景色看起来是双层的

我有一个TextInput用backgroundColor的'rgba(255,255,255,0.16)'，如下：

小吃示例：https：//snack.expo.io/rkEhXn6Nr

import * as React from 'react';
import { TextInput, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'green',
  },
  paragraph: {
    padding: 24,
    margin: 24,
    fontSize: 24,
    textAlign: 'center',
    backgroundColor: 'rgba(255,255,255,0.16)',
  },
});

看起来好像有一个具有该背景色的视图（THERE IS N'T）和一个文本元素，其内部也包裹了该背景色。我怎样才能只有“视图”才能具有该背景色？在android上看起来还不错：

问题/说明：

仅在iOS上会发生此问题，因为它被用作性能调整来避免alpha混合。在iOS设备上，a会自动获得与父视图相同的backgroundColor。有关颜色继承的更多信息，您可以在github上查看此问题。

在您的特定情况下，您正在将背景色应用于文本容器，并且偶然地也将其应用于文本本身。这就是为什么您获得“突出显示”文本的原因。我可以使用一个简单的文本组件轻松地重新创建此行为。见以下法师：

解：

要解决此问题并获得跨平台的工作解决方案，您需要添加一个围绕TextInput的View并在其中应用backgroundColor（和其他容器样式）。

码：

     
        
     


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'green',
  },
  textContainer: {
    margin: 24,
    padding: 24,
    backgroundColor: 'rgba(255,255,255,0.16)',
  },
  paragraph: {
    fontSize: 24,
    textAlign: 'center',
  },
});

工作示例：

https://snack.expo.io/ByOzRyHHr

输出：