我一直在尝试通过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`.