У меня есть два компонента:
homeScreen.js (родитель)
Card.js (ребенок)
Я отображаю компонент карты, когда поиск не переключается, и я посылаю через реквизит все данные, которые должна принять карта, без проблем с отображением.
Я попытался добавить строку поиска, мои данные - это массив объектов, поэтому я создал новый if для рендеринга, когда поиск переключается внутри, что, если я передаю ту же карту, я передаю if of search, не переключаемый со всемиданные, которые мне нужны как реквизиты, пока я просто вижу рейтинг, я понятия не имею, почему это происходит, я попытался добавить что-то статическое, ничего не должно в эмуляторе, я консоль зарегистрировал, что реквизиты, которые я посылаю из homeScreen.js в Card.js, и они посмотрелихорошо, они такие же, как и должны быть, поэтому я думаю, что это проблема стиля или что-то, потому что я не вижу ничего, только рейтинг, когда поиск переключается
homeScreen.js
import axios from 'axios';
import React from 'react';
import {
ActivityIndicator,
ScrollView,
Text,
View,
TouchableOpacity,
TextInput,
} from 'react-native';
import Card from '../Components/Card/card';
export default class HomeScreen extends React.Component {
state = {
shows: [],
isLoading: true,
search: false,
title: 0,
titleSaved: false,
};
componentDidMount() {
this.getData();
}
toggleSearch = () => {
this.setState({
search: true,
});
};
setSearchedTitle = searchedTitle => {
this.state.shows.filter((currentValue, index) => {
if (searchedTitle === this.state.shows[index].data.name) {
this.setState({title: index, titleSaved: true});
}
});
};
getData = () => {
const requestUrls = Array.from({length: 9}).map(
(_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`,
);
const handleResponse = data => {
this.setState({
isLoading: false,
shows: data,
});
};
const handleError = error => {
console.log(error);
this.setState({
isLoading: false,
});
};
Promise.all(requestUrls.map(url => axios.get(url)))
.then(handleResponse)
.catch(handleError);
};
render() {
const {isLoading, shows, search, title} = this.state;
if (isLoading) {
return <ActivityIndicator size="large" color="#0000ff" />;
} else if (!search) {
return (
<View>
<View>
<TouchableOpacity
onPress={this.toggleSearch}
style={{height: 50, width: 300}}>
<Text style={{textAlign: 'center', fontSize: 40}}>
Press to Search
</Text>
</TouchableOpacity>
</View>
<ScrollView style={{backgroundColor: '#E1E8E7'}}>
{shows.length &&
shows.map((show, index) => {
return (
<Card
key={show.data.id}
title={show.data.name}
rating={show.data.rating.average}
source={show.data.image.medium}
genres={show.data.genres}
language={show.data.language}
network={show.data.network}
schedule={show.data.schedule}
summary={show.data.summary}
navigation={this.props.navigation}
/>
);
})}
</ScrollView>
</View>
);
} else if (search && !isLoading) {
return (
<View>
<View style={{flex: 2}}>
<TextInput
style={{
height: 100,
width: 100,
borderColor: 'gray',
borderWidth: 1,
}}
onChangeText={searchedTitle => {
this.setSearchedTitle(searchedTitle);
}}
/>
<Text>Hello</Text>
</View>
{console.log(
this.state.shows[this.state.title].data.schedule,
'hello ttotot',
)}
{console.log(
'hello world',
this.state.shows[this.state.title].data.image.medium,
)}
<View style={{flex: 20}}>
{this.state.titleSaved ? (
<Card
style={{height: 300, width: 300}}
title={shows[title].data.name}
source={shows[title].data.image.medium}
genres={shows[title].data.genres}
language={shows[title].data.language}
network={shows[title].data.network}
schedule={shows[title].data.schedule}
summary={shows[title].data.summary}
/>
) : (
<View>
<Text>sadasd</Text>
</View>
)}
</View>
</View>
);
}
}
}
Card.js
import React from 'react';
import {Image, View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Icon from 'react-native-vector-icons/FontAwesome';
const Card = props => {
return (
<View style={styles.container}>
<Image style={styles.Image} source={{uri: `${props.source}`}} />
<Text style={styles.title}>{props.title}</Text>
<View style={styles.ratingContainer}>
<Text style={styles.rating}>Rating: {props.rating}</Text>
<Icon name="star" size={30} color="grey" />
</View>
<TouchableOpacity
style={styles.button}
onPress={() => {
props.navigation.navigate('Details', {
title: props.title,
rating: props.rating,
source: props.source,
genres: props.genres,
language: props.language,
network: props.network,
schedule: props.schedule,
summary: props.summary,
});
}}>
<Text style={styles.buttonText}>Press for details </Text>
</TouchableOpacity>
</View>
);
};
export default Card;
const styles = StyleSheet.create({
container: {
alignItems: 'center',
},
Image: {
flex: -1,
width: wp('90%'),
height: hp('65%'),
},
title: {
flex: 1,
fontSize: 40,
borderRadius: 10,
color: '#3C948B',
margin: 15,
justifyContent: 'center',
alignItems: 'center',
},
ratingContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
elevation: 6,
justifyContent: 'space-between',
borderWidth: 1,
width: 300,
},
rating: {
fontSize: 25,
paddingLeft: 15,
},
button: {
flex: 1,
color: '#3C948B',
backgroundColor: '#3C948B',
height: hp('7%'),
width: wp('70%'),
margin: 20,
alignItems: 'center',
borderBottomLeftRadius: 10,
borderTopRightRadius: 10,
},
buttonText: {
flex: 1,
fontSize: 25,
},
});