ReactNative TextInput placeholderTextColor似乎不起作用

ki0zmccv  于 2023-05-01  发布在  React
关注(0)|答案(5)|浏览(126)

这看起来是一件很简单的事情,我不明白我怎么会做不对,但是ReactNative TextInput上的 placeholderTextColor 对我没有任何帮助。
http://facebook.github.io/react-native/docs/textinput.html#placeholdertextcolor

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

什么都不做...

bq3bfh9z

bq3bfh9z1#

这个管用

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

希望有帮助!干杯!

lbsnaicq

lbsnaicq2#

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

qjp7pelc3#

我这样做了,效果很好:

// 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的样式 prop 和计算 prop (与Vue中相同。js)。你可以在这里添加一个函数,比如:

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

别忘了你也可以在对象中传播:

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

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

myzjeezk

myzjeezk4#

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

在React Native的最新版本中尝试

unguejic

unguejic5#

简单易行的解决方案

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

相关问题