RN 踩坑 React.Children.only expected to receive a single React element child.

RN 这个报错是 React.Children.只应接收一个子元素。

render() {
    return (
      <Provider value={{...this.props}}>
        <TabNavigator
          tabBarStyle={Device.deviceName === 'iPhone Xʀ' ? styles.tabBarStyle : null}
        >
          <TabNavigator.Item
            selected={this.state.selectedTab === 'home'}
            title="首页"
            titleStyle={styles.titleStyle}
            selectedTitleStyle={styles.selectedTitleStyle}
            renderIcon={() => <Img source={index} />}
            renderSelectedIcon={() => <Img source={indexActive} />}
            onPress={() => {
              this.setState({ selectedTab: 'home' })
              this.props.navigation.setOptions({title: '首页'})
            }}
          >
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'youhui'}
            title="优惠"
            titleStyle={styles.titleStyle}
            selectedTitleStyle={styles.selectedTitleStyle}
            renderIcon={() => <Img source={youhui} />}
            renderSelectedIcon={() => <Img source={youhuiActive} />}
            onPress={() => {
              this.setState({ selectedTab: 'youhui' })
              this.props.navigation.setOptions({title: '优惠'})
            }}
          >
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'find'}
            title="发现"
            titleStyle={styles.titleStyle}
            selectedTitleStyle={styles.selectedTitleStyle}
            renderIcon={() => <Img source={find} />}
            renderSelectedIcon={() => <Img source={findActive} />}
            onPress={() => {
              this.setState({ selectedTab: 'find' })
              this.props.navigation.setOptions({title: '发现'})
            }}
          >
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'zhuangbei'}
            title="装备"
            titleStyle={styles.titleStyle}
            selectedTitleStyle={styles.selectedTitleStyle}
            renderIcon={() => <Img source={zhuangbei} />}
            renderSelectedIcon={() => <Img source={zhuangbeiActive} />}
            onPress={() => {
              this.setState({ selectedTab: 'zhuangbei' })
              this.props.navigation.setOptions({title: '装备'})
            }}
          >
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'more'}
            title="更多"
            titleStyle={styles.titleStyle}
            selectedTitleStyle={styles.selectedTitleStyle}
            renderIcon={() => <Img source={more} />}
            renderSelectedIcon={() => <Img source={moreActive} />}
            onPress={() => {
              this.setState({ selectedTab: 'more' })
              this.props.navigation.setOptions({title: '更多'})
            }}
          >
          </TabNavigator.Item>
        </TabNavigator>
      </Provider>
    )
  }

从代码中可以看到，确实只有 Provider 一个元素，于是重新自习看了看react-native-tab-navigator的用法。
以下是官方文档：

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

我发现在TabNavigator.Item标签中是有内容的，因为还没有写好对应的标签页就没有添加内容，修改代码后运行成功。