ReactNative使用TabBar报错react.children.only expected to receive a single react element child

最新推荐文章于 2025-07-07 08:35:13 发布

带颜值的程序员

最新推荐文章于 2025-07-07 08:35:13 发布

阅读量9.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react-native

本文链接：https://blog.youkuaiyun.com/meiyulong518/article/details/70748903

react-native 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个React Native中TabBar组件的常见错误——react.children.onlyexpectedtoreceiveasinglereactelementchild及其解决方案。通过添加一个View组件作为TabBar项的唯一子元素，可以解决此问题。

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

ReactNative使用TabBar报错react.children.only expected to receive a single react element child

实例代码：

  <TabBarIOS.Item
            title="首页"
            icon={require('./img/动态副本.png')}
            selected={this.state.selectedTab === '首页'}
            onPress={() =>{
              this.setState({
                selectedTab:'首页',
              });
            }}>
          </TabBarIOS.Item>//一运行就报错react.children.only expected to receive a single react element child

这里写图片描述

解决办法:
React Native 中无论是 TabBarIOS.Item 还是 TabBar.Item 必须有且只有一个组件，说白了就是需要有子组件的存在，并且只存在一个子组件。

  <TabBarIOS.Item
            title="首页"
            icon={require('./img/动态副本.png')}
            selected={this.state.selectedTab === '首页'}
            onPress={() =>{
              this.setState({
                selectedTab:'首页',
              });
            }}>
            <View >
                  <Text>首页</Text>
             </View>
          </TabBarIOS.Item>