React Native 条件渲染自定义卡片样式问题

Question

我有两个组件：

• homeScreen.js （父级）

• Card.js （儿童）

当我的搜索未切换时，我会渲染卡片组件，并且我通过道具发送卡片应该接受的所有数据，而不会出现渲染问题。

我试图添加一个搜索栏，我的数据是一个对象数组，所以我创建了一个新的 if 以在内部切换搜索时进行渲染但我只能看到评级我不知道为什么会发生这种情况我试图添加一些东西 static 在模拟器中什么都不应该我控制台记录了我从 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,
  },
});

Answer 1

不确定，但问题可能是卡的容器有一个flex:20属性使其占用太多空间（不确定它是否真的以这种方式工作，但你永远不知道）。 尝试将该值更改为1