TabBarIOS：onlyChild必须通过一个孩子只有一个孩子

我是新的react-native，并且我尝试创建TabBarIOS时出错。它一直告诉我onlyChild必须通过一个孩子只有一个孩子但我的代码是完全相同的教程，我跟着。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;

我发现，通常这个错误会被TouchableHighlightLINK触发，但我没有用任何这些。

有什么想法？

来源

2016-04-13 J.Doe

你的'More'组件是什么样的？ – VonD

完全像欢迎组件，但我有2件事情改变了，类Welcome - > class More，module.exports = Welcome; - > module.exports = More; –

如果你在你的'index.ios.js'中有'console.log（Welcome，More）'，什么出来？ – VonD

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

在你的情况下，期望孩子没有得到的组件是选择TabBarIOS.Item。如果将TabBarIOS.Item组件的selected道具都设置为false，则会看到该错误消失。

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

但我不确定为什么这些注释没有触发异常：它应该抱怨某些文本未被包装在Text组件中。可能与你的反应本地版本有关。

来源

2016-04-13 10:01:25 VonD

谢谢，我的代码现在可以在删除注释后生效。我的反应本地版本已经在最新的形式，v 0.23.1，我想你是对的，反应 - 本机本身有什么问题 –

TabBarIOS：onlyChild必须通过一个孩子只有一个孩子

回答

相关问题