ReactNative TextInput placeholderTextColor 似乎不起作用答案

【问题标题】：ReactNative TextInput placeholderTextColor doesn't seem to be workingReactNative TextInput placeholderTextColor 似乎不起作用
【发布时间】：2015-04-15 19:20:58
【问题描述】：

这似乎是一件简单的事情，我不明白我怎么做的不对，但是 ReactNative TextInput 上的 placeholderTextColor 并没有为我做任何事情。

http://facebook.github.io/react-native/docs/textinput.html#placeholdertextcolor

<TextInput
    style={styles.input}
    placeholder="Foobar"
    placeholderTextColor="#FFFFFF"/>

什么都不做……

【问题讨论】：

好的。应该首先查看 github 问题。这是此问题的主题：github.com/facebook/react-native/issues/294
我仍然无法绕过它，您是否找到任何解决方案？
@Ritveak 如果我没记错的话，这些属性在本机反应中被破坏了，并且已经被修复。你用的是什么版本的 RN？
我正在使用 16.9 我认为我遇到了麻烦，因为我在顶部使用 react-native-paper，所以它可能掩盖了默认的 TextInput 道具，这就是 placeholderTextColor 不起作用的原因。

标签： react-native

【解决方案1】：

这行得通 -

<TextInput
  placeholder="Enter password"
  placeholderTextColor="white"
/>

希望对您有所帮助！干杯！

【讨论】：

您使用的是什么版本。我没试过这个有一段时间了。他们修好了吗？
0.8.0.是的，已经修好了。
不，不起作用，而且你的代码和他的一样，它应该如何提供帮助？

【解决方案2】：

 <TextInput
      value={this.state.environment}
      onChangeText={(environment) => this.setState({ environment })}
      placeholder={'Environment'}
      placeholderTextColor="#202020"
      secureTextEntry={true}
      style={styles.input}
      underlineColorAndroid='rgba(0,0,0,0)'
    />

【讨论】：

【解决方案3】：

我这样做了，效果很好：

// use standard input
import { TextInput } from 'react-native';


<TextInput
    style={[styles.searchInput, { opacity: this.state.location.length ? 1 : 0.6 }]}
    placeholder="Location"
    placeholderTextColor={colors.lighterGrey}
    onChangeText={location => this.setState({ location })}
    value={this.state.location}
/>


const styles = StyleSheet.create({
  searchInput: {
    flex: 1,
    lineHeight: 22,
    fontSize: 17,
    fontFamily: fonts.secondary.regular,
    color: colors.white,
    padding: 5,
  },
});

我在让不透明度工作时遇到问题，所以我发现上述解决方案作为最小标记解决方案效果很好：

style={[styles.searchInput, { opacity: this.state.location.length ? 1 : 0.6 }]}

style 属性可以接受具有从右到左优先级的样式对象数组，因此您可以使用基于状态的插件覆盖默认样式。我也可以说它与 CSS 的特殊性有关。

就我而言，我在调整占位符文本和“填充文本”之间的文本颜色时遇到了问题。 styles.searchInput 的不透明度影响了 <TextInput placeholderTextColor=""> 属性。

我的解决方案在这里处理 iOS 和 Android 上的不透明度问题，并演示了一个非常正常的 <TextInput> 设置。

在我上面的示例代码的上下文中，人们总是可以检查this.state.location.length 以查看该字段是否为空。

如果是这样，请将 TextInput 的 style 属性与计算属性一起使用（与 Vue.js 中的相同）。您可以在其中放置一个函数，例如：

style={[styles.textInput, calculatedStyles()]}

别忘了你也可以在 Objects 中传播：

style={[...inputStyles, ...errorStyles]}

正如 Asanka Sampath 在另一个答案中显示的那样，根据您的设计，underlineColorAndroid 可能是一个非常有用的 TextInput 道具。

【讨论】：

【解决方案4】：

placeholder: "Enter password",
placeholderTextColor: "white"

在 React Native 的最新版本中试试这个

【讨论】：

为我工作。设置颜色就行了！
placeholder: "Email" 不是样式属性在 TextInput 标记中使用此属性，如下所示

【解决方案5】：

简单易行的解决方案

 <TextInput
          style={styles.textInputStyle} //if you want give style to the TextInput
          placeholder="Email"
          placeholderTextColor="steelblue"
        />

【讨论】：