在改变颜色时：将类转换为功能

Question

每当我按下搜索栏进行输入时，我都会尝试改变背景色，以使我的便装盒更上一层楼。

这里是SearchScreen.js的完整代码：

import React, {useState} from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, FlatList, Keyboard, Image, TouchableOpacity, TouchableWithoutFeedback} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';

const listItems = ['Meo Sudoeste', 'Vodafone Paredes de Coura', 'Super Bock Super Rock', 'NOS Primavera Sound', 'Rock in Rio', 'EDP Cool Jazz']

function SearchScreen({navigation}) {

const [searchBarFocused, setSearchBarFocused] = useState(true)

  componentDidMount() {
this.keyboardDidShow = Keyboard.addListener('keyboardDidShow',
this.keyboardDidShow)
this.keyboardWillShow = Keyboard.addListener('keyboardWillShow',
this.keyboardWillShow) 
this.keyboardDidShow = Keyboard.addListener('keyboardWillHide',
this.keyboardWillHide)    
  }

  keyboardDidShow = () => {
    this.setState({ searchBarFocused: true })
  }

  keyboardWillShow = () => {
    this.setState({ searchBarFocused: true })
  }

  keyboardWillHide = () => {
    this.setState({ searchBarFocused: false })
  }


  return (
    <View style={styles.screen}>
  <Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
    <Animatable.View animation={this.state.searchBarFocused ? "fadeInLeft" : "fadeInRight"}>
      <Icon name={this.state.searchBarFocused ? "md-arrow-back" : "ios-search"} style={styles.icon}/>
    </Animatable.View>
    <TextInput style={styles.inputBox}
              underlineColorAndroid='rgba(0,0,0,0)' 
              placeholder="Procura aqui"
              placeholderTextColor = "black"
              selectionColor="black"
              keyboardType="default"/>
  </Animatable.View>
  <View style={styles.teste}> 
    <Text style={styles.festivais}>Recomendados</Text>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>

      //I took this off because it is irrelevant

    </ScrollView>
    <FlatList
      style={{backgroundColor:searchBarFocused?'rgba(0,0,0,0.3)':'white'}}
      data = {listItems}
      renderItem={({item}) => <Text style = {{ padding:20, fontSize:20}}>{item}</Text>}
      keyExtractor={(item, index) => index.toString()}
    />
  </View>
</View>
  );
}

SearchScreen.navigationOptions = {
  title: 'Procurar',
};

const styles = StyleSheet.create({

  //I took this off because it is irrelevant

});

export default SearchScreen;

大多数代码与背景颜色的变化有关，应该应用于一个类，但是我不知道如何在函数上使用'componentDidMount（）'。

您能告诉我该怎么编码吗？

Answer 1

类组件的生命周期，例如componentDidMount，在功能组件中不存在。将它们替换为useEffects（）。而且this在函数中也不存在。它存在，但不以您认为的方式表现。

  const [searchBarFocused, setSearchBarFocused] = useState(true)

  useEffects(() => {
   keyboardDidShow = Keyboard.addListener('keyboardDidShow',
   keyboardDidShow)
   keyboardWillShow = Keyboard.addListener('keyboardWillShow',
   keyboardWillShow) 
   keyboardDidShow = Keyboard.addListener('keyboardWillHide',
   keyboardWillHide)    
  }, []) // empty dependencies means it will run only once at the start 


...

  // Update the state using only hooks
  setSearchBarFocused(<value>)
...