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

Posted 2023-05-06

【中文标题】如何在 React Native 中更改 TextInput 占位符的样式？

【英文标题】：How to change styling of TextInput placeholder in React Native?

【发布时间】：2016-06-05 12:38:23

【问题描述】：

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

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

【问题讨论】：

不。很高兴找到解决方案

好吧..现在我也遇到了同样的问题..

如果你只需要改变颜色，看that anwser

【参考方案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】：

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