Question

我是反应原生的新手，我在尝试创建TabBarIOS时出错。它一直告诉我 onlyChild必须通过一个孩子只有一个孩子，但我的代码与我所遵循的教程完全相同。

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的组件。

在您的情况下，期待孩子而不是一个孩子的组件是已选择 TabBarIOS.Item。如果您将selected组件的TabBarIOS.Item道具设置为false，则会发现错误消失。

现在为什么它找不到Welcome和More组件？由于您的渲染方法中的评论（//welcome component，//more component）。删除注释，错误将得到解决。

我不确定，为什么评论没有触发异常：它应该抱怨某些文字没有包含在Text组件中。也许与您的react-native版本有关。

TabBarIOS：onlyChild必须传递一个只有一个孩子的孩子

1 个答案: