React Native: компонент не отображается - PullRequest
Новая
       10

React Native: компонент не отображается

0 голосов
/ 04 мая 2018

Я импортирую пользовательский компонент (RecipeCard), и он не отображается на экране.

Я вполне уверен, что это связано со стилем, который я сейчас использую.

Компонент fastimage работает точно так же, как компонент RN, и его можно увидеть здесь .

Любая помощь приветствуется!

File1 

<View style={styles.container}>
    <Head
      headerText={this.props.type}
      navigation={this.props.navigation}
      backButton
    />
    <FlatList
      data={this.state.data}
      renderItem={({ item }) => <RecipeCard {...item} />}
    />
</View>
 const styles = {
   container: {
     flex: 1
   }};

RecipeCard 

<FastImage
   style={styles.imageStyle}
   source={{ uri: this.props.image }}
>
  <View style={styles.titleContainer}>
      <Text style={styles.titleText}>             
       {this.props.title}
      </Text>
      <Text style={styles.subtitleText}>
       {this.props.subtitle}
      </Text>
  </View>
</FastImage>

const styles = StyleSheet.create({
  imageStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'transparent',
  },
  titleContainer: {
    position: 'absolute',
    marginTop: 15,
    zIndex: 2,
    bottom: 13,
    flex: 1,
    width: '100%',
    height: 70,
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  titleText: {
    color: 'white',
    fontWeight: '800',
    paddingLeft: 5,
    paddingTop: 10
  },
  subtitleText: {
    color: '#adadad',
    fontWeight: '500',
    paddingLeft: 5,
    paddingTop: 5,
  }
});

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Я попробовал приведенный выше пример, я смог увидеть изображение с небольшим изменением imageStyle, просто добавил height, и оно показывало изображения.

Компонент RecipeCard 

const RecipeCard = (props) => {
  return (
    <FastImage
      style={styles.imageStyle}
      source={{ uri: 'https://unsplash.it/400/400?image=1' }}
    >
     <View style={styles.titleContainer}>
       <Text style={styles.titleText}>             
        {props.title}
       </Text>
       <Text style={styles.subtitleText}>
        {props.subtitle}
       </Text>
     </View>
   </FastImage>
 );
}

В imageStyle Я добавил height

imageStyle: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'stretch',
  backgroundColor: 'transparent',
  height: 200
},

Надеюсь, это поможет!

0 голосов
/ 04 мая 2018

Попробуйте добавить resizeMode в FastImage: 

resizeMode={FastImage.resizeMode.contain}

Это также описано в документации FastImage: 

import FastImage from 'react-native-fast-image'

const YourImage = () =>
  <FastImage
    style={styles.image}
    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...