React Native循环渲染PostHeader组件无显示且无报错问题求助

你的代码里有几个明确错误导致PostHeader组件无法渲染，逐个修正即可：

1. PostHeader组件未返回JSX #

函数组件必须明确返回React元素，你的PostHeader组件只写了JSX结构但没有return语句，导致组件无输出。修正方式有两种：

方式一：添加return语句 #

const PostHeader = ({post, index}) => {
  return (
    <View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5, alignContent: 'center'}} key={index}>
      <View>
        <Image source={{ uri: post.profile_picture}} style={styles.story}/>
        <Text style={{color: 'white'}}>{post.user.user}</Text>
      </View>
    </View>
  )
};

方式二：使用箭头函数隐式返回（推荐） #

把JSX用圆括号包裹，省略return关键字：

const PostHeader = ({post, index}) => (
  <View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5, alignContent: 'center'}} key={index}>
    <View>
      <Image source={{ uri: post.profile_picture}} style={styles.story}/>
      <Text style={{color: 'white'}}>{post.user.user}</Text>
    </View>
  </View>
);

2. 修复拼写错误 #

• Posts组件中View的属性stlye拼写错误，应为style
• 样式对象中的conatiner拼写错误，应为container

修正后的Posts组件完整代码：

import { Image, StyleSheet, Text, View } from 'react-native'
import {Divider} from 'react-native-elements'
import React from 'react'

const Posts = ({post, index}) => {
  return (
    <View style={styles.container}>      
      <Divider width={1} orientation='vertical'></Divider>
      <PostHeader post={post} key={index}/>
    </View>
  )
};

const PostHeader = ({post, index}) => (
  <View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5, alignContent: 'center'}} key={index}>
    <View>
      <Image source={{ uri: post.profile_picture}} style={styles.story}/>
      <Text style={{color: 'white'}}>{post.user.user}</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
   container: {
    marginBottom: 30
   },
   story: {
    width: 35,
    height: 35,
    borderRadius: 50,
    marginBottom: 10,
    borderWidth: 2,
    borderColor: 'orange'
  },
});

export default Posts

额外检查 #

注意你代码中post.profile_pictrue可能存在拼写错误（正确应为profile_picture），如果你的POSTS数据里的字段是后者，需要修正这个拼写，否则图片也无法正常加载。

内容的提问来源于stack exchange，提问作者온석태