Поиск не меняет цвет фона - PullRequest
Новая
       1

Поиск не меняет цвет фона

0 голосов
/ 24 февраля 2020

Я пытаюсь изменить цвет фона на моем плоском элементе всякий раз, когда нажимаю на строку поиска для ввода. При тестировании с помощью 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;

Почему я получаю эту ошибку и могу ли я исправить ее? Пожалуйста, помогите мне

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Вы используете функциональный компонент в своей кодовой базе, поэтому вы должны использовать 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 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>
  );
}
0 голосов
/ 24 февраля 2020

чтобы использовать this.state, вы должны иметь компонент на основе классов или использовать вместо него Hook для функционального компонента

...