通过Navigator

时间:2016-06-17 01:38:01

标签: react-native tabbar navigator

我一直在尝试通过Navigator下的RenderScene函数加载组件。如果路由不包含任何基于route.object的对应对象,我将启动导航器以使用tabBarIOS返回视图,第二个代码段上的代码是TabView的外观。

render: function() {
    var initialRoute = {login: true};
    return (
        <Navigator
          ref="navigator"
          style={styles.container}
          configureScene={(route) => {
            if(Platform.OS === 'android') {
              return Navigator.SceneConfigs.FloatFromBottomAndroid;
            }
            //
            else {
              return Navigator.SceneConfigs.FloatFromBottom;
            }
          }}
          initialRoute={initialRoute}
          renderScene={this.renderScene}
          navigationBar={
            <Navigator.NavigationBar
              routeMapper={NavigationBarRouteMapper}
              style={styles.navBar}
            />
          }
          />

    );
  },

  renderScene: function(route, navigator) {
      if(route.login) {
        return (
          <LoginScreen
            navigator={navigator}
            onLogin={route.callback}
            />
        );
      }

        return (
            <HomeTab navigator={navigator}/>
        );
      
  }

登录后带有标签和假定主页的组件是

import React, { Component } from 'react';
import {
  AppRegistry,
  TabBarIOS,
  StyleSheet
} from 'react-native';

var Welcome = require('./welcome.ios');
var More = require('./more.ios');

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


  render() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}>
        <TabBarIOS.Item
          selected={this.state.selectedTab === 'welcome'}
          icon={{uri:'featured'}}
          onPress={() => {
              this.setState({
                  selectedTab: 'welcome',
              });
          }}>
            <Welcome/>
        </TabBarIOS.Item>
        <TabBarIOS.Item
          selected={this.state.selectedTab === 'more'}
          icon={{uri:'contacts'}}
          onPress={() => {
                this.setState({
                    selectedTab: 'more',
                });
          }}>
          <More/>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

我在下面遇到了奇怪的错误。顺便说一下,我已经测试了将hometab加载为主页并且它工作正常,只有在这种情况下,如果它从导航器连接它发生。

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

0 个答案:

没有答案