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

Question

我有一个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 (
      <View style={styles.container}>
        <TextInput
          style={styles.paragraph}
          value={"bleep bleep bleep bleep"}
        />
      </View>
    );
  }
}

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上看起来还不错：

Answer 1

问题/说明：

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

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

解：

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

码：

<View style={styles.container}>
     <View style={styles.textContainer}>
        <TextInput
          style={styles.paragraph}
          value={"bleep bleep bleep bleep"}
        />
     </View>
</View>

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

输出：

Answer 2

请看一下这个。不知道这是否适合你。在我的 iOS 模拟器上看起来相当不错。

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

const App = () => {
  const [name, setName] = useState();

  return (
    <View style={styles.container}>
      <View style={styles.textInputContainer}>
        <TextInput
          style={styles.paragraph}
          value={name}
          onChangeText={setName}
        />
      </View>
    </View>
  );
};

export default App;

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

https://snack.expo.io/S112z5NSr