我一直在努力寻找一种集成TabBarIOS和Navigator的解决方案,并且一直空着。基本上,我想要解决的是在启动时显示登录屏幕的屏幕(没有标签),然后导航到有标签的主屏幕。
这是我的索引,登录屏幕,标签栏组件和导航器组件文件。
如果有人有任何建议,我将不胜感激!
由于
Index.ios.js:
'use strict'
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, TabBarIOS } from 'react-native';
import _ from 'lodash';
import Icon from 'react-native-vector-icons/FontAwesome';
import StatusBarBackground from './app/components/StatusBarBackground'
import AppNavigator from './app/navigation/AppNavigator';
import LoginIndexScreen from './app/screens/LoginIndexScreen'
import BottomBarIOS from './app/components/BottomBarIOS'
class mobile extends Component {
render() {
return (
<AppNavigator />
);
}
}
const styles = StyleSheet.create({
navigatorStyles: {
}
});
AppRegistry.registerComponent('mobile', () => mobile);
BottomBarIOS.js
'use strict'
import React, { Component } from 'react';
import { StyleSheet, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import AppNavigator from '../navigation/AppNavigator';
class BottomBarIOS extends Component {
constructor(props) {
super(props)
this.state = {
selectedTab: "HomeScreen"
}
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === "HomeScreen"}
title="Home"
onPress={() => this.setState({selectedTab: "HomeScreen"})}>
<AppNavigator
initialRoute={{ident: "HomeScreen"}} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === "CatalogueScreen"}
title="Catalogue"
onPress={() => this.setState({selectedTab: "CatalogueScreen"})}>
<AppNavigator
initialRoute={{ident: "CatalogueScreen"}} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === "MapScreen"}
title="Map"
onPress={() => this.setState({selectedTab: "MapScreen"})}>
<AppNavigator
initialRoute={{ident: "MapScreen"}} />
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === "UserProfileScreen"}
title="Profile"
onPress={() => this.setState({selectedTab: "UserProfileScreen"})}>
<AppNavigator
initialRoute={{ident: "UserProfileScreen"}} />
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
const styles = StyleSheet.create({
navigatorStyles: {
}
});
module.exports = BottomBarIOS;
LoginIndexScreen.js
'use strict'
import React, { Component } from 'react';
import { AsyncStorage, StyleSheet, Text, View, TouchableOpacity, AlertIOS,} from 'react-native';
import ViewContainer from '../components/ViewContainer';
import StatusBarBackground from '../components/StatusBarBackground';
import AppNavigator from '../navigation/AppNavigator'
class LoginIndexScreen extends Component {
constructor(props) {
super(props)
this.state = {
selectedTab: "LoginIndexScreen"
}
}
render() {
return (
<ViewContainer>
<StatusBarBackground />
<View style={styles.textContainer}>
<Text style={styles.loginText}>Welcome to Poqet</Text>
<TouchableOpacity onPress={(event) => this._navigateToHomeScreen()}>
<Text style={styles.nextStep}>Press to go to Home Screen</Text>
</TouchableOpacity>
</View>
</ViewContainer>
);
}
_navigateToHomeScreen() {
this.props.navigator.push({
ident: "HomeScreen"
});
}
}
const styles = StyleSheet.create({
textContainer: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
loginText: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 30
},
nextStep: {
marginTop: 80
}
});
module.exports = LoginIndexScreen;
AppNavigator.js
'use strict'
import React, { Component } from 'react';
import { Navigator } from 'react-native';
import RegisterIndexScreen from '../screens/RegisterIndexScreen';
import LoginIndexScreen from '../screens/LoginIndexScreen';
import HomeScreen from '../screens/HomeScreen';
import UserProfileScreen from '../screens/UserProfileScreen';
import CatalogueScreen from '../screens/CatalogueScreen';
import MapScreen from '../screens/MapScreen';
class AppNavigator extends Component {
_renderScene(route, navigator) {
var globalNavigatorProps = { navigator }
switch(route.ident) {
case "RegisterIndexScreen":
return (
<RegisterIndexScreen {...globalNavigatorProps} />
)
case "LoginIndexScreen":
return (
<LoginIndexScreen {...globalNavigatorProps} />
)
case "HomeScreen":
return (
<HomeScreen {...globalNavigatorProps} />
)
case "UserProfileScreen":
return (
<UserProfileScreen {...globalNavigatorProps}
person={route.person} />
)
case "CatalogueScreen":
return (
<CatalogueScreen {...globalNavigatorProps} />
)
case "MapScreen":
return (
<MapScreen {...globalNavigatorProps} />
)
default:
return (
<LoginIndexScreen {...globalNavigatorProps} />
)
}
}
render() {
return (
<Navigator
initialRoute={{ident: "LoginIndexScreen"}}
ref="appNavigator"
renderScene={this._renderScene}
configureScene={(route) => ({...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight, })} />
);
}
}
module.exports = AppNavigator;
答案 0 :(得分:1)
我建议使用此路由库:https://github.com/aksonov/react-native-router-flux
您尝试实现的目标非常容易,而且代码更少。