时间戳

首页 > 解决方案 > React Native：组件未呈现

reactjs - React Native：组件未呈现

问题描述

我正在导入一个自定义组件 (RecipeCard)，但它没有出现在屏幕上。

我相当肯定这与我目前使用的样式有关。

fastimage 组件的工作方式与 RN 组件完全相同，可以在此处查看。

任何帮助表示赞赏！

文件 1

<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
   }};

食谱卡

<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,
  }
});

标签： reactjsreact-nativeflexbox

解决方案

我尝试了您上面给出的示例，我能够看到图像有一点变化imageStyle，刚刚添加height并显示图像。

食谱卡组件

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
},

希望这可以帮助！

推荐阅读