按下时改变颜色：将 class 转换为函数

Question

每当我按下搜索栏进行输入时，我正在尝试改变我的 flatist 的背景颜色。

这里是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;

大部分代码都与背景颜色的变化有关，应该应用于 class 但我不知道如何在函数上使用 'componentDidMount()'。

你能告诉我应该如何编码吗？

已更新

当前代码有错误Can't find variable: useEffect：

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)

  useEffects(() => {
keyboardDidShow = Keyboard.addListener('keyboardDidShow',
keyboardDidShow)
keyboardWillShow = Keyboard.addListener('keyboardWillShow',
keyboardWillShow) 
keyboardDidShow = Keyboard.addListener('keyboardWillHide',
keyboardWillHide)    
   }, [])

  keyboardDidShow = () => {
setSearchBarFocused(true) 
  }

  keyboardWillShow = () => {
setSearchBarFocused(true)
  }

  keyboardWillHide = () => {
setSearchBarFocused(false)
  }

  return (
<View style={styles.screen}>
  <Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
    <Animatable.View animation={searchBarFocused ? "fadeInLeft" : "fadeInRight"}>
      <Icon name={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}> 

 //It's 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({
      //It's irrelevant
    });

    export default SearchScreen;

我该如何解决这个问题？

Answer 1

Class 像 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>) // instead of this.setState(<blah blah>)
...

回忆一下你从 OOP 中学到的一切，然后把它扔掉 window。没有 this this.setState 组件生命周期。一切都只是纯函数——就像上帝在 OOP 出现并毁掉一切之前的意图一样。

本文是从面向对象编程（Class 组件）过渡到函数式编程（函数式组件）的良好开端

https://overreacted.io/how-are-function-components-different-from-classes/

按下时改变颜色：将 class 转换为函数

On press changing color: transforming class into function

search

reactjs

react-native

react-native-android