如何在文本输入中切换占位符文本颜色值？

Question

我想做一个深色模式和浅色模式，在深色模式下我想要占位符textcolor white，在浅色模式下我想要深色。为了实现这一点，我在 placeholdertextcolor 本身中尝试了 if/else，我还尝试使用如下代码所示的函数来实现。

我使用来自 react-native 的 Switch，它返回 true 或 false。真时执行语句中的第一种样式，假时执行语句中的第二种样式。这些 placeholderTextColor 在 texinput 中。

// First try
const toggle = this.state.switchValue;
<TextInput
 style={textInput}
 onChangeText={(password) => this.setState({password})}
 placeholder={'Password'}
 placeholderTextColor={toggle === true ? styles.darkColor : styles.whiteColor}
 value={this.state.password}
/>

// Second try by doing it through a function
test = () => {
    return toggle === true ? styles.darkColor : styles.whiteColor
};
<TextIn...
placeholderTextColor={() => this.test()}
/>

// Third try. From the statement above I get an object, so I get the color (string ("#444")). But still get same error.
placeholderTextColor={toggle === true ? JSON.stringify(styles.darkColor.color) : JSON.stringify(styles.whiteColor.color)}

我希望占位符根据开关的状态改变颜色。但我得到的只是错误；警告：失败的道具类型：警告：失败的道具类型：无效的道具和无效的道具placeholderTextColor提供给TextInput：函数。有什么办法可以做到这一点？

Answer 1

根据 documentation 的 TextInput "placeholderTextColor" 应该接受 "color" 道具并且您正在使用 style 。

试试这个

const toggle = this.state.switchValue;
<TextInput
 style={textInput}
 onChangeText={(password) => this.setState({password})}
 placeholder={'Password'}
 placeholderTextColor={toggle === true ? "black" : "white"}
 value={this.state.password}
/>