[英]Change TextInput Style on Focus React Native
First of all, I've researched through other posts and find this How to change styling of TextInput placeholder in React Native?首先,我研究了其他帖子并找到了这个如何在 React Native 中更改 TextInput 占位符的样式?
The issue with the solutions in the post is once fontStyle
is set to italic, it won't go back to normal font (I'm guessing that it can't be overridden unless the component updates).帖子中解决方案的问题是,一旦将
fontStyle
设置为斜体,它就不会恢复为正常字体(我猜除非组件更新,否则它无法被覆盖)。 Here is my code sample这是我的代码示例
<TextInput
style={
this.state.value.length === 0
? {fontStyle: 'italic', color: 'white'} // font changed to white and italic
: {fontStyle: 'normal', color: 'black'} // font changed to black but stays italic
}
value={this.state.value}
/>
I came up with some hack by forcing the TextInput
to update using forceUpdate()
or set a key to the component, but this caused the keyboard UI to close when user is typing which is bad for UX.我想出了一些技巧,通过使用
forceUpdate()
强制TextInput
更新或为组件设置一个键,但这会导致键盘 UI 在用户键入时关闭,这对 UX 不利。
I'd like to simply comment on the linked post instead but my reputation is not enough.我只想对链接的帖子发表评论,但我的声誉还不够。
Is that intended behavior or did I make any mistake?这是预期的行为还是我犯了任何错误? If anyone can provide some explanation / solution, it will be greatly appreciated.
如果有人可以提供一些解释/解决方案,将不胜感激。
PS Tested on Android using the latest React Native PS 使用最新的 React Native 在 Android 上测试
Use onFocus for the text input to handle your case.使用onFocus作为文本输入来处理您的情况。 Because whenever you focus text input and start typing it will update the state and component will re-render.
因为每当您聚焦文本输入并开始输入时,它都会更新状态并且组件将重新渲染。 Look at this expo snack with the example usage.
使用示例用法查看此博览会小吃。
state = { isFocused: false };
onFocusChange = () => {
this.setState({ isFocused: true });
}
<TextInput
onFocus={this.onFocusChange}
placeholder='Enter Input Here'
style={(this.state.isFocused) ? {fontStyle: 'normal', color: 'black'} : {fontStyle: 'italic', color: 'white'}}
/>
so learn more about component lifecycle then you'll know how to handle more of these type of cases and also always read documentation before using a component then you'll easily find the solution for your specific case.因此,了解有关组件生命周期的更多信息,您将知道如何处理更多此类情况,并且在使用组件之前始终阅读文档,然后您将轻松找到适合您特定情况的解决方案。
Usually a TextInput has some public styles, so you can use Stylesheet.compose to reduce your code like this:通常 TextInput 有一些公共样式,因此您可以使用 Stylesheet.compose 来减少您的代码,如下所示:
const styles = StyleSheet.create({
input: {
borderRadius: 5,
},
inputOnFocus: {
borderBottomWidth: 2,
borderBottomColor: 'green'
}
});
const inputOnFocus = StyleSheet.compose(styles.input, styles.inputOnFocus);
then you can use setState
or useState
to change the style.那么你可以使用
setState
或useState
来改变样式。
Here is another way using hooks (I'm using expo.io btw)这是使用钩子的另一种方法(我正在使用 expo.io btw)
import React, { useState } from 'react'
import { View, StyleSheet, TextInput } from 'react-native'
const TextInput = () => {
const [isHighlighted, setIsHighlighted] = useState(false)
return (
<View>
<TextInput
style={[styles.textInput, isHighlighted && styles.isHighlighted]}
onFocus={() => { setIsHighlighted(true)}
onBlur={() => {setIsHighlighted(false)} />
</View>
)
}
const styles = StyleSheet.create({
textInput: {
borderColor: 'grey',
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 8,
height: 43,
},
isHighlighted: {
borderColor: 'green',
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.