如何在react-native中更改占位符textSize

rbpvctlc  于 2023-01-05  发布在  React
关注(0)|答案(6)|浏览(246)

在我的TextInput中我想改变placeHolder的字体大小,我尝试了如下操作:

<TextInput
    style={styles.email}
    value={this.state.email} 
    placeholder="Email"
    placeholderTextColor="red"
    //placeholderTextSize = 20px
    onChange={this.handleEmailChange.bind(this)}
    onBlur={this.onBlur.bind(this)}/>

当我写这样的颜色是为我工作,但大小是不工作,任何人可以给予我建议如何改变占位符文本的大小,任何帮助非常感谢

ldioqlga

ldioqlga1#

我不确定你是否可以只指定placeholderText的大小,但是你可以在TextInput中改变输入文本的fontSize:

var styles = StyleSheet.create({
 email:     {
    fontSize:   12, <-- Textsize of Input-Text and Placeholder-Text
 },
})

也许你的解决方案没有px也能工作?!但我不这么认为。如果你想有一个不同于输入文本的占位符文本,那么你可以访问TextInput的onChangeText方法,并在你向文本字段中键入内容时立即更改fontSize。

tnkciper

tnkciper2#

可以像这样创建TextInput组件。

<TextInput
value={value}
style={value ? styles.input : styles.placeholder}
placeholderTextColor="white"
{...props}/>
m2xkgtsf

m2xkgtsf3#

有没有办法(据我记得)直接改变字体大小只有占位符,因为当你改变fontSize使用样式,你改变两者,输入fontSize以及占位符fontSize。

const [ text, setText ] = useState<string>('');

然后使用状态检查输入字段是否为空,如果为空,则将fontSize更改为:

{ fontSize: text ? 18 : 12 }

然而,重要的是要注意,即使这种方法工作,但由重新渲染造成的延迟,当然是值得注意的。

yb3bgrhw

yb3bgrhw4#

<TextInput 
style={{fontSize:12}} 
placeholder='any text' 
onChangeText={(input)=>this.setState({input: input})}
placeholderTextColor='green'/>
yvgpqqbh

yvgpqqbh5#

只需增加TextInput的“fontSize”属性,占位符大小就会自动增加

cgvd09ve

cgvd09ve6#

这是您代码

<TextInput
    style={styles.email}
    value={this.state.email} 
    placeholder="Email"
    placeholderTextColor="red"
    //placeholderTextSize = 20px <-------it's not working
    onChange={this.handleEmailChange.bind(this)}
    onBlur={this.onBlur.bind(this)}/>

这是你样式

const style = StyleSheet.create({
    email: {
        borderColor: 'white',
        width: '100%',
        borderWidth: 1,
        borderRadius: 10,
        padding: 10,
        height: 55,
        width: 378,
        marginLeft: 8.27,
        marginTop: 5,
        fontSize:15,  <------------add this line it's working 
        backgroundColor: 'white'
    },

相关问题