Question

看起来这么简单，我不知道我是怎么做不到的，但是在ReactNative TextInput上的 placeholderTextColor 并没有做任何事情我。

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

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

什么也没做......

Answer 1

这有效 -

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

希望它有所帮助！干杯！

Answer 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)'
    />

Answer 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 }]}

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

就我而言，我无法在占位符文本和“填充文本”之间调整文本颜色。 styles.searchInput的不透明度正在影响<TextInput placeholderTextColor="">道具。

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

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

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

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

别忘了您还可以在对象中传播

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

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

Answer 4

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

在React Native的最新版本中尝试

ReactNative TextInput placeholderTextColor似乎不起作用

4 个答案: