RN Exception: Warning: Functions are not valid as a React child. This may happen if you return a ...

最新推荐文章于 2025-06-20 12:36:48 发布

mazaiting

最新推荐文章于 2025-06-20 12:36:48 发布

阅读量2.1w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/mazaiting/article/details/88890197

本文详细解析了React Native中因headerRight属性接收函数而非组件导致的警告问题，提供了正确的代码示例，帮助开发者避免常见陷阱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异常

ReactNativeJS: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
        in RCTView (at View.js:60)
        in View (at createAnimatedComponent.js:154)
        in AnimatedComponent (at Header.js:443)
        in RCTView (at View.js:60)
        in View (at Header.js:488)
        in RCTView (at View.js:60)
        in View (at Header.js:624)
        in RCTView (at View.js:60)
        in View (at createAnimatedComponent.js:154)
        in AnimatedComponent (at index.js:134)
        in SafeView (at withOrientation.js:54)
        in withOrientation (at Header.js:622)
        in RCTView (at View.js:60)
        in View (at createAnimatedComponent.js:154)
        in AnimatedComponent (at Header.js:611)
        in Header (at withOrientation.js:30)
        in withOrientation (at StackViewLayout.js:154)
        in RCTView (at View.js:60)
        in View (at StackViewLayout.js:780)
        in RCTView (at View.js:60)
        in View (at createAnimatedComponent.js:154)
        in AnimatedComponent (at StackViewCard.js:69)
        in RCTView (at View.js:60)
        in View (at createAnimatedComponent.js:154)
        in AnimatedComponent (at screens.native.js:58)
        in Screen (at StackViewCard.js:57)
        in Card (at createPointerEventsContainer.js:27)
        in Container (at StackViewLayout.js:858)
        in RCTView (at View.js:60)
        in View (at screens.native.js:83)
        in ScreenContainer (at StackViewLayout.js:311)
        in RCTView (at View.js:60)
        in View (at createAnimatedComponent.js:154)
        in AnimatedComponent (at StackViewLayout.js:307)
        in Handler (at StackViewLayout.js:300)
        in StackViewLayout (at withOrientation.js:30)
        in withOrientation (at StackView.js:79)
        in RCTView (at View.js:60)
        in View (at Transitioner.js:215)
        in Transitioner (at StackView.js:22)
        in StackView (created by Navigator)
        in Navigator (at createKeyboardAwareNavigator.js:12)
        in KeyboardAwareNavigator (at createAppContainer.js:388)
        in NavigationContainer (at rootPage.js:84)
        in RootPage (at drawPage.js:112)
        in DrawPage (at TopView.js:202)
        in RCTView (at View.js:60)
        in View (at createAnimatedComponent.js:154)
        in AnimatedComponent (at TopView.js:164)
        in RCTView (at View.js:60)
        in View (at TopView.js:163)
        in TopView (at TopView.js:201)
        in RootElement (at renderApplication.js:33)
        in RCTView (at View.js:60)
        in View (at AppContainer.js:102)
        in RCTView (at View.js:60)
        in View (at AppContainer.js:122)
        in AppContainer (at renderApplication.js:32)

解决方法

问题代码

由于 headerRight参数的值应该为一个组件，而不是方法，所以会报出此警告。

static navigationOptions = () => ({
    title: '更多',
    headerRight: () => <View />
  });

解决

将上述代码改为

  static navigationOptions = () => ({
    title: '更多',
    headerRight: <View />
  });