ios - 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)',
  },
});

看起来好像有一个具有该背景颜色的 View (没有)和一个也包含该背景颜色的文本元素。我怎样才能只让“ View ”具有该背景颜色？在 Android 上看起来不错:

Answer 1

问题/解释:

此问题仅发生在 iOS 上，因为它被用作性能调整以避免 Alpha 混合。在 iOS 设备上，<Text/>自动获取与父 View 相同的背景颜色。有关颜色继承的更多信息，您可以查看此 issue on github 。

在您的具体情况下，您正在将背景颜色应用于文本容器，并且意外地也应用于文本本身。这就是为什么你会得到“突出显示”的文本。我可以使用简单的文本组件轻松地重新创建此行为。请看下面的法师:

解决方案:

要克服这个问题并拥有跨平台工作解决方案，您需要添加一个围绕 TextInput 的 View ，并在那里应用背景颜色(和其他容器样式)。

代码:

<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

输出: