Skip to content

Commit

Permalink
Use ./components/TabIcon (aksonov#851)
Browse files Browse the repository at this point in the history 
* Use ./components/TabIcon

* FIX PropTyes on TabIcon
  • Loading branch information
@sarovin @aksonov
sarovin authored and aksonov committed Jun 28, 2016
1 parent 631a6a2 commit ff92c06
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 113 deletions.
293 changes: 184 additions & 109 deletions Example/Example.js
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,67 @@
import React from 'react';
import {AppRegistry, Navigator, StyleSheet, Text, View} from 'react-native'
import Launch from './components/Launch'
import Register from './components/Register'
import Login from './components/Login'
import Login2 from './components/Login2'
import Login3 from './components/Login3'
import {Scene, Reducer, Router, Switch, TabBar, Modal, Schema, Actions} from 'react-native-router-flux'
import Error from './components/Error'
import Home from './components/Home'
import TabView from './components/TabView'
import EchoView from './components/EchoView'
import NavigationDrawer from './components/NavigationDrawer'
import Button from "react-native-button";
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import Launch from './components/Launch';
import Register from './components/Register';
import Login from './components/Login';
import Login2 from './components/Login2';
import Login3 from './components/Login3';
import {
Scene,
Reducer,
Router,
Switch,
Modal,
Actions,
} from 'react-native-router-flux';
import Error from './components/Error';
import Home from './components/Home';
import TabView from './components/TabView';
import TabIcon from './components/TabIcon';
import EchoView from './components/EchoView';
import NavigationDrawer from './components/NavigationDrawer';
import Button from 'react-native-button';

class TabIcon extends React.Component {
render(){
return (
<Text style={{color: this.props.selected ? "red" :"black"}}>{this.props.title}</Text>
);
}
}

class Right extends React.Component {
render(){
return <Text style={{
width: 80,
height: 37,
position: "absolute",
bottom: 4,
right: 2,
padding: 8,
}}>Right</Text>
}
}
const Right = () => (
<Text
style={{
width: 80,
height: 37,
position: 'absolute',
bottom: 4,
right: 2,
padding: 8,
}}
>Right</Text>
);

const styles = StyleSheet.create({
container: {flex:1, backgroundColor:"transparent",justifyContent: "center",
alignItems: "center",},
tabBarStyle: {
backgroundColor: '#eee',
},
tabBarSelectedItemStyle: {
backgroundColor: '#ddd',
},
container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
alignItems: 'center',
},
tabBarStyle: {
backgroundColor: '#eee',
},
tabBarSelectedItemStyle: {
backgroundColor: '#ddd',
},
});

const reducerCreate = params=>{
const defaultReducer = Reducer(params);
return (state, action)=>{
console.log("ACTION:", action);
return defaultReducer(state, action);
}
const reducerCreate = params => {
const defaultReducer = new Reducer(params);
return (state, action) => {
console.log('ACTION:', action);
return defaultReducer(state, action);
};
};

// define this based on the styles/dimensions you use
const getSceneStyle = function (/* NavigationSceneRendererProps */ props, computedProps) {
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
const style = {
flex: 1,
backgroundColor: '#fff',
Expand All @@ -72,68 +79,136 @@ const getSceneStyle = function (/* NavigationSceneRendererProps */ props, comput

let currentSwitchPage = 'text1';

const SwitcherPage = function (props) {
const SwitcherPage = (props) => (
<View>
<Text style={{ marginTop: 100, textAlign: 'center' }}>current page: {props.text}</Text>
<Button
onPress={() => {
currentSwitchPage = currentSwitchPage === 'text1' ? 'text2' : 'text1';
Actions.refresh({ key: 'switcher' });
}}
>
Switch!
</Button>
<Button
onPress={() => {
Actions.launch({ type: 'reset' });
}}
>
Exit
</Button>
</View>
);

class Example extends Component {
render() {
return (
<View>
<Text style={{marginTop:100,textAlign:'center'}}>current page: {props.text}</Text>
<Button
onPress={() => {
currentSwitchPage = currentSwitchPage === 'text1' ? 'text2' : 'text1';
Actions.refresh({key: 'switcher'});
}}
>
Switch!
</Button>
<Button
onPress={() => {
Actions.launch({type:'reset'});
}}
<Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
<Scene key="modal" component={Modal} >
<Scene key="root" hideNavBar hideTabBar>
<Scene key="echo" clone component={EchoView} getTitle={(navState) => navState.key} />
<Scene
key="switcher"
component={Switch}
selector={() => { return 'text1'; }}
>
Exit
</Button>
</View>
);
};

export default class Example extends React.Component {
render() {
return <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
<Scene key="modal" component={Modal} >
<Scene key="root" hideNavBar hideTabBar>
<Scene key="echo" clone component={EchoView} getTitle={(navState) => navState.key} />
<Scene key="switcher" component={Switch} selector={(props) => {
return 'text1';
}}>
<Scene key="text1" text="text1" component={(props) => <SwitcherPage {...props} text={currentSwitchPage} />} />
<Scene key="text2" text="text2" component={(props) => <SwitcherPage {...props} text={currentSwitchPage} />} />
</Scene>
<Scene key="register" component={Register} title="Register"/>
<Scene key="register2" component={Register} title="Register2" duration={1}/>
<Scene key="home" component={Home} title="Replace" type="replace"/>
<Scene key="launch" component={Launch} title="Launch" initial={true} />
<Scene key="login" direction="vertical" >
<Scene key="loginModal" direction="vertical" component={Login} title="Login"/>
<Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2" panHandlers={null} duration={1}/>
<Scene key="loginModal3" hideNavBar={true} component={Login3} title="Login3" panHandlers={null} duration={1}/>
</Scene>
<Scene key="tabbar" component={NavigationDrawer}>
<Scene key="main" tabs={true} tabBarStyle={styles.tabBarStyle} tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}>
<Scene key="tab1" title="Tab #1" icon={TabIcon} navigationBarStyle={{backgroundColor:"red"}} titleStyle={{color:"white"}}>
<Scene key="tab1_1" component={TabView} title="Tab #1_1" onRight={()=>alert("Right button")} rightTitle="Right" />
<Scene key="tab1_2" component={TabView} title="Tab #1_2" titleStyle={{color:"black"}}/>
</Scene>
<Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}>
<Scene key="tab2_1" component={TabView} title="Tab #2_1" renderRightButton={()=><Right/>} />
<Scene key="tab2_2" component={TabView} title="Tab #2_2" hideBackImage onBack={()=>alert("Left button!")} backTitle="Left" duration={1} panHandlers={null}/>
</Scene>
<Scene key="tab3" component={TabView} title="Tab #3" hideTabBar={true} icon={TabIcon}/>
<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
<Scene key="tab5" component={TabView} title="Tab #5" hideTabBar={true} hideNavBar={true} icon={TabIcon}/>
</Scene>
</Scene>
<Scene
key="text1"
text="text1"
component={(props) => <SwitcherPage
{...props}
text={currentSwitchPage}
/>}
/>
<Scene
key="text2"
text="text2"
component={(props) => <SwitcherPage
{...props}
text={currentSwitchPage}
/>}
/>
</Scene>
<Scene key="register" component={Register} title="Register" />
<Scene key="register2" component={Register} title="Register2" duration={1} />
<Scene key="home" component={Home} title="Replace" type="replace" />
<Scene key="launch" component={Launch} title="Launch" initial />
<Scene key="login" direction="vertical" >
<Scene key="loginModal" direction="vertical" component={Login} title="Login" />
<Scene
key="loginModal2"
hideNavBar
component={Login2}
title="Login2"
panHandlers={null}
duration={1}
/>
<Scene
key="loginModal3"
hideNavBar
component={Login3}
title="Login3"
panHandlers={null}
duration={1}
/>
</Scene>
<Scene key="tabbar" component={NavigationDrawer}>
<Scene
key="main"
tabs
tabBarStyle={styles.tabBarStyle}
tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}
>
<Scene
key="tab1"
title="Tab #1"
icon={TabIcon}
navigationBarStyle={{ backgroundColor: 'red' }}
titleStyle={{ color: 'white' }}
>
<Scene
key="tab1_1"
component={TabView}
title="Tab #1_1"
onRight={() => alert('Right button')}
rightTitle="Right"
/>
<Scene
key="tab1_2"
component={TabView}
title="Tab #1_2"
titleStyle={{ color: 'black' }}
/>
</Scene>
<Scene key="tab2" initial title="Tab #2" icon={TabIcon}>
<Scene
key="tab2_1"
component={TabView}
title="Tab #2_1"
renderRightButton={() => <Right />}
/>
<Scene
key="tab2_2"
component={TabView}
title="Tab #2_2"
hideBackImage
onBack={() => alert('Left button!')}
backTitle="Left"
duration={1}
panHandlers={null}
/>
</Scene>
<Scene key="error" component={Error}/>
<Scene key="tab3" component={TabView} title="Tab #3" hideTabBar icon={TabIcon} />
<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar icon={TabIcon} />
<Scene key="tab5" component={TabView} title="Tab #5" hideTabBar icon={TabIcon} />
</Scene>
</Scene>
</Router>;
}
</Scene>
<Scene key="error" component={Error} />
</Scene>
</Router>
);
}
}

export default Example;
11 changes: 7 additions & 4 deletions Example/components/TabIcon.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from 'react';
import {PropTypes} from "react";
import {Text} from "react-native";
import React, {
PropTypes,
} from 'react';
import {
Text,
} from 'react-native';

const propTypes = {
selected: PropTypes.string,
selected: PropTypes.bool,
title: PropTypes.string,
};

Expand Down

0 comments on commit ff92c06

Please sign in to comment.