如何在 React Native 中更改 TextInput 占位符的样式？答案

【问题标题】：How to change styling of TextInput placeholder in React Native?如何在 React Native 中更改 TextInput 占位符的样式？
【发布时间】：2016-06-05 12:38:23
【问题描述】：

有没有办法为 React Native 中 TextInput 的placeholder 设置fontStyle: 'italic' only？

看here at the documentation好像只能设置占位符和placeholderTextColor。

【问题讨论】：

不。很高兴找到解决方案
好吧..现在我也遇到了同样的问题..
如果你只需要改变颜色，看that anwser

标签： android ios react-native

【解决方案1】：

您可以使用 placeholderTextColor 属性设置占位符颜色。

<TextInput placeholderTextColor={'red'} />

【讨论】：

这是我一直在寻找的答案，不是这个帖子中原始问题的答案，但仍然..帮助了我！
这应该是公认的答案

【解决方案2】：

改进 Daniel 的答案以获得更通用的解决方案

class TextInput2 extends Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: props.value.length == 0 }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(ev) {
    this.setState({ placeholder: ev.nativeEvent.text.length == 0 }); 
    this.props.onChange && this.props.onChange(ev); 
  }
  render() {
    const { placeholderStyle, style, onChange, ...rest } = this.props;

    return <TextInput 
      {...rest} 
      onChange={this.handleChange}
      style={this.state.placeholder ? [style, placeholderStyle] : style}
      />
  }
}

用法：

<TextInput2 
  value={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>

【讨论】：

它给出了这个错误：undefined is not an object (evalating '_th is2.state.myText') - 我做错了吗？
@cheesus 为什么不呢？
因为它使用的代码行数比 Sebastián Lara 的答案多 2300%。
@cheesus 它实际上也正确回答了 OP 的问题。 OP 承认 placeholderTextColor 的存在，并特别询问如何设置其他属性的样式。这个答案也是在钩子之前写的，但是用更少的代码行转换为基于钩子的替代方案应该是微不足道的
没注意到。但是，我在谷歌搜索如何设置占位符颜色时来自谷歌。从另一个答案的票数来看，我不是唯一一个。

【解决方案3】：

您可以自己构建此功能。当输入为空时会显示占位符，因此您可以检查您的状态并相应地更改字体样式：

<TextInput
  onChangeText={txt => this.setState({enteredText: txt})}
  fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'}
  style={style.input} />

由于某种原因，这似乎不适用于 fontFamily = System.所以你必须明确指定 fontFamily。

【讨论】：

onChange 传递一个事件对象，以获取您应该使用的文本event.nativeEvent.text
或者使用 onChangeText 因为它只是传递文本
在输入第一个字符和更新样式之间存在延迟，导致样式出现明显的跳跃

【解决方案4】：

TextInput 的Content 和placeHolder 使用了共同的样式，所以可以为placeHolder 设置fontWeight 和fontSize。另外，您可以将属性placeholderTextColor 设置为TextInput

【讨论】：

【解决方案5】：

您也可以使用无状态组件。

这是我的解决方案：

首先，在我的屏幕组件中...

import React from 'react';
import { View } from 'react-native';
import MyWrappedComponent from '../wherever/your/components/are/MyWrappedComponent';

class ScreenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myText: null,
    };
    this.handleTextOnChange = this.handleTextOnChange.bind(this);
  }

  handleTextOnChange(myText) {
    this.setState({ myText });
  }

  render() {
    const { myText } = this.state

  return (
    <View>
      <MyWrappedComponent            
        value={myText}
        placeholder="My Placeholder Text"
        onChangeText={this.handleTextOnChange}
        style={styles.someStyle}
        placeholderStyle={style.somePlaceholderStyle}
      />
    </View>
  )
}

然后，在我的包装组件中...

import React from 'react';
import { TextInput } from 'react-native-gesture-handler';

const MyWrappedComponent = ({
  style,
  placeholderStyle,
  value,
  ...rest
}) => (
  <TextInput
    {...rest}
    style={!value ? [style, placeholderStyle] : style}
  />
);

export default MyWrappedComponent;

【讨论】：

【解决方案6】：

如果您只是想调整占位符的位置，您可以将内部 a 包裹起来并为 : 添加样式

<View style={{
    flex: 0.3,
    alignContent: "center",
    justifyContent: "center",
    alignSelf: "center"
    }}>

它将允许占位符居中对齐，因为有时“alignContent”、“alignItems”、“justifyContent”可能不起作用。另外：

inputContainerStyle={{
                    borderColor: 'transparent'
                }}

设置任何边框线的样式（上面的那个删除了来自'react-native-elements'的所有边框）。

【讨论】：

【解决方案7】：

看看占位符：

TextInput 占位符将继承 TextInput 的样式。所以我们可以在 TextInput 样式中设置我们的样式。有时我们需要为占位符设置不同的颜色，因此我们可以轻松地使用placeholderTextColor 属性进行自定义。

【讨论】：

【解决方案8】：

我发现您分配给文本输入的样式也将应用于您的占位符文本。您可以为占位符文本设置的唯一属性是颜色，其他样式将从文本输入样式继承。

【讨论】：

【解决方案9】：

只要改变textInputStyle，占位符样式会和textInputStyle一样，你想改变颜色使用placeholderTextColor

【讨论】：

【解决方案10】：

传递一个组件作为占位符对我有用

【讨论】：