blocks|key|33216|text|对Daniel的答案进行改进，以获得更通用的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|33217|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}
++++++/>
++}
}|code-block|syntax|javascript|33218|用法：|33219|<TextInput2+
++value={this.state.myText}
++style={{+fontFamily:+"MyFont"+}}
++placeholderStyle={{+fontFamily:+"AnotherFont",+borderColor:+'red'+}}
/>|33220|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Improving on Daniel's answer for a more generic solution
<pre><code>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 &amp;&amp; this.props.onChange(ev); 
 }
 render() {
 const { placeholderStyle, style, onChange, ...rest } = this.props;

 return &lt;TextInput 
 {...rest} 
 onChange={this.handleChange}
 style={this.state.placeholder ? [style, placeholderStyle] : style}
 /&gt;
 }
}
</code></pre>
Usage:
<pre><code>&lt;TextInput2 
 value={this.state.myText}
 style={{ fontFamily: &quot;MyFont&quot; }}
 placeholderStyle={{ fontFamily: &quot;AnotherFont&quot;, borderColor: 'red' }}
/&gt;
</code></pre>

blocks|key|34512|text|您可以使用placeholderTextColor属性来设置占位符颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|34513|<TextInput+placeholderTextColor={'red'}+/>|code-block|syntax|javascript|34514|entityMap^0|5|K|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can set your placeholder color by using the <code>placeholderTextColor</code> prop.

<pre><code>&lt;TextInput placeholderTextColor={'red'} /&gt;
</code></pre>

blocks|key|2497737|text|您可以自己构建此功能。输入为空时会显示占位符，因此您可以检查自己的状态并相应地更改fontStyle：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2497738|<TextInput
++onChangeText={txt+=>+this.setState({enteredText:+txt})}
++fontStyle={this.state.enteredText.length+==+0+?+'italic'+:+'normal'}
++style={style.input}+/>|code-block|syntax|javascript|2497739|由于某些原因，这似乎不适用于fontFamily+=+System。因此，您必须显式指定fontFamily。|2497740|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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:

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

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

blocks|key|32987|text|TextInput的Content和placeHolder使用相同的样式，因此可以为placeHolder设置fontWeight和fontSize。另一方面，您可以为TextInput设置属性placeholderTextColor|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|32988|entityMap^0|2C|9|2P|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|32990|text|您还可以使用无状态组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32991|这是我的解决方案：|32992|首先，在我的屏幕组件中...|32993|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>
++)
}|code-block|syntax|javascript|32994|然后，在我的封装组件中...|32995|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;|32996|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can also use a stateless component.

Here's my solution:

First, in my screen component...

<pre><code>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 (
 &lt;View&gt;
 &lt;MyWrappedComponent 
 value={myText}
 placeholder="My Placeholder Text"
 onChangeText={this.handleTextOnChange}
 style={styles.someStyle}
 placeholderStyle={style.somePlaceholderStyle}
 /&gt;
 &lt;/View&gt;
 )
}
</code></pre>

Then, in my wrapped component...

<pre><code>import React from 'react';
import { TextInput } from 'react-native-gesture-handler';

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

export default MyWrappedComponent;
</code></pre>

blocks|key|2497817|text|如果你只是想调整你的占位符的位置，你可以在a中加上样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2497818|<View+style={{
++++flex:+0.3,
++++alignContent:+"center",
++++justifyContent:+"center",
++++alignSelf:+"center"
++++}}>|code-block|syntax|javascript|2497819|它将允许占位符align居中，因为有时'alignContent'，'alignItems'，'justifyContent‘可能不起作用。另外：|2497820|inputContainerStyle={{
++++++++++++++++++++borderColor:+'transparent'
++++++++++++++++}}|2497821|设置任何边框线的样式(上面的那个删除了来自“react-native-element”的所有边框)。|2497822|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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

<pre><code>&lt;View style={{
 flex: 0.3,
 alignContent: "center",
 justifyContent: "center",
 alignSelf: "center"
 }}&gt;
</code></pre>

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

<pre><code>inputContainerStyle={{
 borderColor: 'transparent'
 }}
</code></pre>

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

blocks|key|2497910|text|看看占位符：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2497911|TextInput占位符将继承TextInput的样式。所以我们可以在TextInput样式中设置我们的样式。有时我们需要一种不同的占位符颜色，这样我们就可以很容易地使用placeholderTextColor属性进行自定义。|offset|length|style|CODE|2497912|entityMap^0|0|0|9|2D|K|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Take a look at placeholder:
<code>TextInput</code> 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 <code>placeholderTextColor</code> props for customizing.

blocks|key|34526|text|我发现分配给文本输入的样式也适用于占位符文本。您可以设置的唯一特定于占位符文本的属性是颜色，其他样式将从文本输入样式继承。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|34527|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|32759|text|只需在textInputStyle中更改，占位符样式将更改为与textInputStyle相同，并且您希望使用placeholderTextColor更改颜色|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32760|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|2497949|text|传递一个组件作为占位符对我来说很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2497950|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

Is there a way to set <code>fontStyle: 'italic'</code> only for the <code>placeholder</code> of the TextInput in React Native?

looking <a href="https://facebook.github.io/react-native/docs/textinput.html">here at the documentation</a> seems like you can only set a placeholder and placeholderTextColor.

How to change styling of TextInput placeholder in React Native?

有没有办法在React Native中将fontStyle: 'italic' only设置为placeholder of TextInput？看起来你只能设置一个占位符和placeholderTextColor的。

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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