在焦点上更改文本输入样式 反应本机

Question

首先，我研究了其他帖子并找到了这个 如何在 React Native 中更改 TextInput 占位符的样式？

帖子中解决方案的问题是，一旦fontStyle设置为斜体，它就不会恢复为正常字体(我猜除非组件更新，否则它无法覆盖(。这是我的代码示例

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

我想出了一些技巧，强制TextInput使用 forceUpdate() 进行更新或为组件设置键，但这导致键盘 UI 在用户键入时关闭，这对 UX 不利。

我想简单地评论链接的帖子，但我的声誉还不够。

这是有意的行为还是我犯了什么错误？如果有人可以提供一些解释/解决方案，将不胜感激。

P.S. 使用最新的 React Native 在 Android 上进行了测试

Answer 1

将 onFocus 用于文本输入以处理您的案例。因为每当您聚焦文本输入并开始键入时，它都会更新状态，组件将重新呈现。看看这个带有示例用法的世博会小吃。

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

因此，了解有关组件生命周期的更多信息，然后您将

知道如何处理更多此类情况，并且在使用组件之前始终阅读文档，然后您将轻松找到适合您特定情况的解决方案。

Answer 2

通常 TextInput 有一些公共样式，因此您可以使用 Stylesheet.compose 来减少代码，如下所示：

    const styles = StyleSheet.create({
        input: {
            borderRadius: 5,
        },
        inputOnFocus: {
            borderBottomWidth: 2,
            borderBottomColor: 'green'
        }
    });
    
    const inputOnFocus = StyleSheet.compose(styles.input, styles.inputOnFocus);

然后，您可以使用setState或useState来更改样式。

Answer 3

这是

使用钩子的另一种方法(顺便说一句，我正在使用 expo.io(

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