Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `pingang`.



  • index.android.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     */
     'use strict';
    
     import React,{
       StyleSheet,
       TabBarIOS,
       Text,
       View,
       NavigatorIOS,
       AppRegistry,
     } from 'react-native';
     import Product from './Product.js';
    
     class  pingang extends React.Component {
       statics={
         title: '蝉知博客客户端',
         description: '蝉知客户端reactnative版本',
       };
    
       displayName='蝉知RN客户端';
    
       constructor(props){
         super(props);
         this.state= {
           selectedTab: '推荐产品',
           notifCount: 0,
           presses: 0,
         };
       };
    
       render() {
         return (
           <TabBarIOS
             tintColor="white"
             barTintColor="darkslateblue">
             <TabBarIOS.Item
               title="推荐产品"
               icon={require('./flux.png')}
               selected={this.state.selectedTab === '推荐产品'}
               onPress={() => {
                 this.setState({
                   selectedTab: '推荐产品',
                 });
               }}>
               <NavigatorIOS
                  barTintColor='#007AFF'
                  titleTextColor="#fff"
                  tintColor="#fff"
                  ref="hh"
                  style={styles.container}
                  initialRoute={{
                    component: Product,
                    title: '推荐产品',
                    rightButtonTitle: '分类',
                    onRightButtonPress: ()=>{
                      this.refs.nav_food.navigator.push({
                        title: '地图',
                        component: Map,
                        passProps:{
                          type:'餐饮'
                        }
                      });
                    }
                  }}
                  />
             </TabBarIOS.Item>
             <TabBarIOS.Item
               icon={require('./flux.png')}
               title="推荐文章"
               badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
               selected={this.state.selectedTab === '推荐文章'}
               onPress={() => {
                 this.setState({
                   selectedTab: '推荐文章',
                   notifCount: this.state.notifCount + 1,
                 });
               }}>
               <View style={styles.tabContent}><Text  style={styles.tabText}>464646</Text></View>
             </TabBarIOS.Item>
             <TabBarIOS.Item
               icon={ require('./flux.png') }
               title="More"
               selected={this.state.selectedTab === '个人中心'}
               onPress={() => {
                 this.setState({
                   selectedTab: '个人中心',
                   presses: this.state.presses + 1
                 });
               }}>
               <View style={styles.tabContent}><Text  style={styles.tabText}>464646</Text></View>
             </TabBarIOS.Item>
           </TabBarIOS>
         );
       };
    
     };
    
     var styles = StyleSheet.create({
       tabContent: {
         flex: 1,
         alignItems: 'center',
       },
       tabText: {
         color: 'white',
         margin: 50,
       },
       container: {
        flex: 1
      },
     });
    
    AppRegistry.registerComponent('pingang', () => pingang);
    
    

    Product.js

    import React, {
        View,
        Text,
        TouchableOpacity,
        StyleSheet
    } from 'react-native';
    
    import SecondPageComponent  from './SecondPage.js';
    
    export default class Product extends React.Component {
        constructor(props){
          super(props);
          this.state={};
        };
        componentDidMount() {
        };
        _pressButton() {
            const { navigator } = this.props;
            //或者写成 const navigator = this.props.navigator;
            //为什么这里可以取得 props.navigator?请看上文:
            //<Component {...route.params} navigator={navigator} />
            //这里传递了navigator作为props
            if(navigator) {
                navigator.push({
                    name: 'SecondPageComponent',
                    component: SecondPageComponent,
                })
            }
        };
        render() {
            return (
                <View>
                    <TouchableOpacity onPress={this._pressButton}>
                        <Text style={styles.text}>下一页</Text>
                    </TouchableOpacity>
                </View>
            );
        };
    };
    var styles=StyleSheet.create({
      text:{
        marginTop:60,
        padding:30
      }
    });
    
    

    SecondPage.js

    import React, {
        View,
        Text,
        TouchableOpacity,
        StyleSheet
    } from 'react-native';
    
    import  FirstPageComponent from './Product.js';
    
    export default class SecondPageComponent extends React.Component{
        constructor(props){
          super(props);
          this.state={};
        };
        componentDidMount() {
        };
        _pressButton() {
            const { navigator } = this.props;
            if(navigator) {
                //很熟悉吧,入栈出栈~ 把当前的页面pop掉,这里就返回到了上一个页面:FirstPageComponent了
                navigator.pop();
            }
        };
        render() {
          return (
            <View>
                <TouchableOpacity onPress={this._pressButton}>
                    <Text style={styles.text} >上一页</Text>
                </TouchableOpacity>
            </View>
          );
        }
    };
    var styles = StyleSheet.create({
      text:{
        marginTop:30,
        padding:50
      },
    });
    

    安卓模拟器执行时报错
    0_1457428495049_深度截图20160308170926.png



  • 请大家给予指导,不知道是出在哪个地方,如何修改 这个type



  • render里面有某个标签错了吧



  • @hainuo 说:

    TabBarIOS

    Android上是没有TabBarIOS这个组件的~
    你看到IOS结尾的组件在Android上无法跑,反过来也一样~



  • @okoala 晕啦 我说呢为啥在苹果上能跑 按着就拜拜了


登录后回复