Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const packageName = 'com.rnplayground';
- class FirstTab extends React.Component {
- render(){
- console.log(this.props)
- return(
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>FirstTab</Text>
- </View>
- )
- };
- }
- class SecondTab extends React.Component {
- render(){
- console.log(this.props)
- return(
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>SecondTab</Text>
- </View>
- )
- };
- }
- class ThirdTab extends React.Component {
- render(){
- console.log(this.props)
- return(
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>ThirdTab</Text>
- </View>
- )
- };
- }
- class DrawerScreen extends React.Component {
- render(){
- const {tabs} = this.props;
- return(
- <View style={styles.navigationContainer}>
- {tabs.map((route, index) => {
- const navigationLabel = route.title;
- return (
- <TouchableHighlight
- key={route.screen}
- onPress={() => {
- this.props.navigator.switchToTab({
- tabIndex: index
- });
- }}
- underlayColor='blue'
- >
- <View style={styles.navigationItem}>
- <Text style={styles.navigationLabel}>
- {navigationLabel}
- </Text>
- </View>
- </TouchableHighlight>
- );
- })}
- </View>
- )
- };
- }
- function registerScreens(){
- Navigation.registerComponent(`${packageName}.FirstTab`, () => FirstTab );
- Navigation.registerComponent(`${packageName}.SecondTab`, () => SecondTab );
- Navigation.registerComponent(`${packageName}.ThirdTab`, () => ThirdTab );
- Navigation.registerComponent(`${packageName}.DrawerScreen`, () => DrawerScreen );
- }
- function startApp() {
- registerScreens();
- const tabs = [
- {
- screen: `${packageName}.FirstTab`,
- title: 'FirstTab',
- icon: require('./image.png'),
- navigatorStyle: {
- tabBarHidden: true,
- },
- },
- {
- screen: `${packageName}.SecondTab`,
- title: 'SecondTab',
- icon: require('./image.png'),
- navigatorStyle: {
- tabBarHidden: true,
- },
- },
- {
- screen: `${packageName}.ThirdTab`,
- title: 'ThirdTab',
- icon: require('./image.png'),
- navigatorStyle: {
- tabBarHidden: true,
- },
- },
- ];
- Navigation.startTabBasedApp(
- {
- tabs: tabs,
- drawer: {
- left: {
- screen: `${packageName}.DrawerScreen`,
- passProps: {
- tabs: tabs
- },
- fixedWidth: 800,
- }
- },
- tabsStyle:{
- tabBarHidden: true,
- }
- },
- );
- }
- startApp();
- const styles = StyleSheet.create({
- navigationContainer:{
- flex: 1,
- width: '100%',
- backgroundColor: 'white',
- },
- navigationItem: {
- flex: 1,
- }
- });
Add Comment
Please, Sign In to add comment