Reactjs 反应本机：组件未呈现_Reactjs_React Native_Flexbox

Reactjs 反应本机：组件未呈现

reactjs react-native

Reactjs 反应本机：组件未呈现,reactjs,react-native,flexbox,Reactjs,React Native,Flexbox,我正在导入一个自定义组件（RecipeCard），但它没有出现在屏幕上我相当肯定这与我目前使用的样式有关 fastimage组件的工作原理与RN组件完全相同，并且可以看到感谢您的帮助 File1 <View style={styles.container}> <Head headerText={this.props.type} navigation={this.props.navigation} backButton /&

我正在导入一个自定义组件（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
   }};


}
/>
常量样式={
容器：{
弹性：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,
  }
});


{this.props.title}
{this.props.subtitle}
const styles=StyleSheet.create({
图像样式：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
自我定位：“拉伸”，
背景色：“透明”，
},
标题容器：{
位置：'绝对'，
玛金托普：15，
zIndex:2，
底图：13，
弹性：1，
宽度：“100%”，
身高：70，
flexDirection:'列'，
alignItems:'flex start'，
},
标题文字：{
颜色：'白色'，
重量：'800'，
paddingLeft:5，
加油站：10
},
字幕文本：{
颜色：“#adadad”，
容重：“500”，
paddingLeft:5，
paddingTop:5，
}
});

尝试将resizeMode添加到FastImage：

resizeMode={FastImage.resizeMode.contain}

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

FastImage的文档中也有描述：

resizeMode={FastImage.resizeMode.contain}

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

从“反应本机快速图像”导入快速图像
constYourImage=（）=>

我尝试了您上面给出的示例，我能够看到图像，只是在

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

希望这有帮助

你有

背景色：'transparent'，

这就是你想要的吗？是的，因为我在顶部使用线性渐变。如果我删除

并只导入

图像就会呈现，当您在配方卡中

console.log（this.props）

时会发生什么？如果我删除平面列表，对象会正确传递，图像会正确呈现到屏幕上（从props）。是的，但是当它从

平面列表中传递时，日志会显示什么？