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必須通過一個孩子只有一個孩子

回答

相關問題