时间戳

首页 > 解决方案 > 搜索不会改变背景色

reactjs - 搜索不会改变背景色

问题描述

每当我按下搜索栏进行输入时，我都会尝试在我的平板电脑上更改背景颜色。当通过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;

为什么我会收到此错误，我可以纠正它吗？请帮我

标签： reactjsreact-nativesearchreact-native-android

解决方案

要使用 this.state 你应该有一个基于类的组件或使用 Hook 代替你的功能组件

推荐阅读