React Native报错：Objects are not valid as a React child 求助排查

核心错误原因 #

你遇到的报错是因为Header组件错误地将props对象当作单个title参数接收，并且在App.js中调用Header时未传递title属性，导致在<Text>组件中渲染了一个空对象（props对象），而React不允许直接渲染对象作为子元素。

具体修复步骤 #

1. 修正Header组件的参数接收方式：React组件的第一个参数是props对象，需要解构出title属性，或者通过props.title访问。
2. 给Header组件传递title属性：在App.js中调用Header时传入具体的title值。
3. 修复其他语法/拼写错误：
   • App.js中import {text,...}改为import {Text,...}（小写text改为大写Text）；
   • StatusBar的barStyle = "Ligh-content"改为barStyle = "light-content"（拼写错误）；
   • Header组件中Icon的type="Material-community"属性可以移除，因为使用的是FontAwesome图标库，不需要指定type。

修改后的代码 #

App.js #

import React from 'react';
import { Text, StatusBar, StyleSheet, View } from 'react-native'
import Header from './src/components/Header';
import { Colors } from './src/global/styles';

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar
        barStyle="light-content"
        backgroundColor={Colors.StatusBar}    
      />
      {/* 传递title属性 */}
      <Header title="我的应用"/>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1 }
})

header.js #

import React from 'react';
import { Text, View, StyleSheet } from "react-native"; 
import { Colors, parameters } from '../global/styles';
import Icon from 'react-native-vector-icons/FontAwesome';

// 解构props中的title，或者使用props.title访问
export default function Header({ title }) {
  return (
    <View style={styles.header}>
      <Icon
        name="arrow-left"
        color={Colors.headerText}
        size={28}
        onPress={() => {}}
      />
      <View>
        <Text style={styles.headerText}>{title}</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    backgroundColor: Colors.bouttons,
    height: parameters.headerHeight,
    alignItems: 'center', // 可选：让图标和文字垂直居中
    paddingHorizontal: 10 // 可选：添加左右内边距，优化布局
  },
  headerText: {
    color: Colors.headerText,
    fontSize: 22,
    fontWeight: "bold",
    marginLeft: 10 // 可选：和图标拉开距离，优化视觉效果
  }
})

额外优化建议 #

可以给Header组件的title设置默认值，避免不传title时出现空白：

export default function Header({ title = "默认标题" }) {
  // ...组件内容
}

内容的提问来源于stack exchange，提问作者ghlisi