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

Question

我有一个TextInput，其中backgroundColor的{​​{1}}如下：

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

'rgba(255,255,255,0.16)'

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

Answer 1

问题/解释：

仅在iOS上会发生此问题，因为在该问题上它被用作性能调整来避免Alpha混合。在iOS设备上，<Text/>自动获得与父视图相同的backgroundColor。有关颜色继承的更多信息，请查看此issue on 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