如何改变反应本机中 TextInput 占位符的样式？

You can build this functionality yourself. The placeholder is displayed when the input is empty, so you can check your state and change the fontStyle accordingly:

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

For some reason this does not seem to work with fontFamily = System. So you have to explicitly specify the fontFamily.

Improving on Daniel's answer for a more generic solution

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}
/>
}
}

Usage:

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

Content and placeHolder of TextInput use a common style, so you can set fontWeight and fontSize for placeHolder. For another, you can set property placeholderTextColor for TextInput

You can also use a stateless component.

Here's my solution:

First, in my screen component...

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>
)
}

Then, in my wrapped component...

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;

You can set your placeholder color by using the placeholderTextColor prop.

<TextInput placeholderTextColor={'red'} />

If you simply want to adjust your placeholder's positioning you can wrap the inside a and add styling to the :

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

it'll allow the placeholder align to center as sometimes 'alignContent', 'alignItems', 'justifyContent' may not work. Also:

inputContainerStyle=\{\{
borderColor: 'transparent'
}}

to style any border lines (the one above removes any borders coming from 'react-native-elements').

I found that the styling that you assign to your text input will also apply to your placeholder text. The only property that you can set specific to the placeholder text is the color, other styling will be inherited from the text input styling.

Take a look at placeholder:

TextInput placeholder will inherit TextInput's styles. So we can set our Styles in the TextInput styles. sometimes we need a different color for placeholders, so we can easily use placeholderTextColor props for customizing.

Just change in textInputStyle, placeholder style will change to the same with textInputStyle, and you wanna change color use placeholderTextColor

Passing in a component as the placeholder is what worked for me