react-native TextInput占位符不可见答案

【问题标题】：react-native TextInput placeholder not visiblereact-native TextInput占位符不可见
【发布时间】：2017-04-01 02:07:46
【问题描述】：

我制作的简单屏幕仅包含一个带占位符的 TextInput，但显示占位符。怎么了？

我的组件：

render() {
  <TextInput
    placeHolder="placeholder"
  />
}

index.js：

export default () => {
  <MyComponent />
}

将 TextInput 包装到 View 中没有帮助。

【问题讨论】：

标签： javascript node.js react-native

【解决方案1】：

您似乎将道具 placeholder 拼错为 placeHolder。见https://facebook.github.io/react-native/docs/textinput.html#placeholder。

【讨论】：

该死，问题是：在 iPhone 上它的工作就像一个魅力！

【解决方案2】：

像我这样的人可能会忘记他们不使用默认的颜色。确保调整 placeholderTextColor 属性以对比背景颜色。

【讨论】：

【解决方案3】：

这样试试

render() {
  <TextInput
    placeholder="placeholder text"
  />
}

这样你就可以测试你的组件了

<TextInput
          style={styles.textEdit}
          onChangeText={(text) => this.setState({text})}
          placeholder="add text here to see in place holder"
        />

在样式中添加这个

textEdit: {
    height: 40, 
    borderColor: 'grey', 
    backgroundColor: 'white',
    borderWidth: 1
  },

【讨论】：

【解决方案4】：

这完全是因为占位符拼写错误 -> placeHolder。

render() {
  <TextInput
    placeholder="placeholder text"
  />
}

【讨论】：

【解决方案5】：

您的拼写有误

placeholder='Sreach' (correct)

如果不工作，那么你需要检查placeholderTextColor
有时您的背景颜色和占位符颜色相同

【讨论】：

【解决方案6】：

注意“占位符”文本大小写。通篇应该是“小写字母”

【讨论】：