搜索不会改变背景色

Question

每当我按下搜索栏进行输入时，我都会尝试改变背景色，以使我的便装盒更上一层楼。通过使searchBarFocused:true进行测试时，会弹出一个错误消息，提示Undefined is not an object (evaluating 'this.state')。

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

import React 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}) {

  state={
searchBarFocused: true
  }


  return (
<View style={styles.screen}>
  <Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
    <Icon name='ios-search' style={styles.icon}/>
    <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 part off because it is irrelevant

    </ScrollView>
    <FlatList
      style={{backgroundColor:this.state.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({

//Took this part off, its irrelevant

export default SearchScreen;

为什么会出现此错误，我可以纠正吗？请帮助我

Answer 1

要使用this.state，您应该具有基于类的组件，或者将Hook用作功能组件

Answer 2

您正在代码库中使用功能组件，因此应使用React Hooks处理状态。

import React, {useState} from 'react' 

function SearchScreen({navigation}) {

 const [searchBarFocused, setSearchBarFocused] = useState(false)


  return (
<View style={styles.screen}>
  <Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
    <Icon name='ios-search' style={styles.icon}/>
    <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 part 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>
  );
}

否则，如果要使用Class组件，则可以将class成员用作状态。

class SearchScreen extends React.Component {

  state={
searchBarFocused: true
  }


  return (
<View style={styles.screen}>
  <Animatable.View animation='slideInLeft' duration={500} style={styles.container}>
    <Icon name='ios-search' style={styles.icon}/>
    <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 part off because it is irrelevant

    </ScrollView>
    <FlatList
      style={{backgroundColor:this.state.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>
  );
}