javascript - TabBarIOS : onlyChild must be passed a children with exactly one child

Question

我是 react 原生新手，尝试创建 TabBarIOS 时出错。它一直告诉我 onlyChild 必须传递给一个只有一个 child 的 child ，但我的代码与我遵循的教程完全相同。

index.ios.js

'use strict';
var React = require('react-native');
var Welcome = require('./welcome.js');
var More = require('./more.js');

var {
  Alert,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component,
  TabBarIOS
} = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#f5fcff',
    alignItems: 'center'
  },
  button: {
    height: 44,
    flexDirection: 'row',
    backgroundColor: '#488bec',
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Helvetica',
    color: 'white',
    alignSelf: 'center',
  }
});

class iCareReactNative extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'welcome'
    };
  }

  render() {
    return (
  <TabBarIOS selectedTab={this.state.selectedTab}>
    <TabBarIOS.Item
      selected={this.state.selectedTab === 'welcome'}
      systemIcon="featured"
      onPress={() => {
        this.setState({
          selectedTab: 'welcome'
        });
      }}>
      <Welcome/>//welcome component
    </TabBarIOS.Item>
    <TabBarIOS.Item
        selected={this.state.selectedTab === 'more'}
        systemIcon="contacts"
        onPress={() => {
          this.setState({
            selectedTab: 'more'
          });
        }}>
        <More/>//more component
    </TabBarIOS.Item>
  </TabBarIOS>
    )
  }
}
AppRegistry.registerComponent('iCareReactNative', () => iCareReactNative);

welcome.js

'use strict';

var React = require('react-native');

var {
  StyleSheet,
  View,
  Text,
  Component
} = React;

var styles = StyleSheet.create({
  description: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FFFFFF'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#123456'
  }
});

class Welcome extends Component {
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.description}>
          Welcome to Welcome
        </Text>
      </View>
    );
  }
}

module.exports = Welcome;

我发现通常这个错误会由TouchableHighlight LINK 触发，但我没有使用其中任何一个。

有什么想法吗？

Answer 1

当组件需要一个有效的 React 元素作为子元素但没有得到时，就会触发此错误。要调试此问题，您通常会查找尚未正确导入的组件，或其 render 方法返回 null。

在您的情况下，期望有子级但没有获得子级的组件是 selected TabBarIOS.Item。如果将 TabBarIOS.Item 组件的两个 selected 属性设置为 false，您将看到错误消失。

现在为什么找不到 Welcome 和 More 组件？由于渲染方法中的注释(//welcome component、//more component)。删除注释，错误就解决了。

不过，我不确定为什么注释没有触发异常:它应该提示某些文本没有包装在 Text 组件中。也许与你的 react native 版本有关。