Skip to content

S
safetcut-app
Commit a3deb22a by OuiAtichat
Options

demo bottom navbar

parent caa73f16
Showing with 246 additions and 75 deletions
.prettierrc
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
"trailingComma": "es5", "trailingComma": "es5",
"tabWidth": 4, "tabWidth": 4,
"singleQuote": true, "singleQuote": true,
"jsxBracketSameLine": true, "jsxBracketSameLine": false,
"useTabs": true "useTabs": true
} }
App.js
import { AppLoading } from 'expo' import { AppLoading } from 'expo';
import * as Font from 'expo-font' import * as Font from 'expo-font';
import React, { useState } from 'react' import React, { useState } from 'react';
import { Ionicons } from '@expo/vector-icons' import { Ionicons } from '@expo/vector-icons';
import AppRouter from './src/navigation/AppRouter' import AppRouter from './src/navigation/AppRouter';
const loadResourcesAsync = async () => { const loadResourcesAsync = async () => {
await Promise.all([ await Promise.all([
...@@ -12,25 +12,24 @@ const loadResourcesAsync = async () => { ...@@ -12,25 +12,24 @@ const loadResourcesAsync = async () => {
Roboto: require('native-base/Fonts/Roboto.ttf'), Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font, ...Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free to
// remove this if you are not using it in your app Avenir_Roman: require('./src/assets/fonts/Avenir-Roman.ttf'),
// 'space-mono': require('./src/assets/fonts/SpaceMono-Regular.ttf'),
}), }),
]) ]);
} };
const handleLoadingError = (error: Error) => { const handleLoadingError = (error: Error) => {
// In this case, you might want to report the error to your error reporting // In this case, you might want to report the error to your error reporting
// service, for example Sentry // service, for example Sentry
console.warn(error) console.warn(error);
} };
const handleFinishLoading = setLoadingComplete => { const handleFinishLoading = setLoadingComplete => {
setLoadingComplete(true) setLoadingComplete(true);
} };
const Application = props => { const Application = props => {
const [isLoadingComplete, setLoadingComplete] = useState(false) const [isLoadingComplete, setLoadingComplete] = useState(false);
if (!isLoadingComplete && !props.skipLoadingScreen) { if (!isLoadingComplete && !props.skipLoadingScreen) {
return ( return (
...@@ -39,10 +38,10 @@ const Application = props => { ...@@ -39,10 +38,10 @@ const Application = props => {
onError={handleLoadingError} onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)} onFinish={() => handleFinishLoading(setLoadingComplete)}
/> />
) );
} else { } else {
return <AppRouter /> return <AppRouter />;
} }
} };
export default Application export default Application;
package.json
...@@ -27,11 +27,12 @@ ...@@ -27,11 +27,12 @@
"react-native-animatable": "^1.3.2", "react-native-animatable": "^1.3.2",
"react-native-elements": "^1.1.0", "react-native-elements": "^1.1.0",
"react-native-gesture-handler": "^1.2.1", "react-native-gesture-handler": "^1.2.1",
"react-native-router-flux": "^3.38.0", "react-native-router-flux": "^4.0.6",
"react-native-vector-icons": "^6.5.0", "react-native-vector-icons": "^6.5.0",
"react-native-web": "^0.11.4", "react-native-web": "^0.11.4",
"react-navigation": "^3.11.0", "react-navigation": "^3.11.0",
"react-navigation-redux-helpers": "^3.0.2", "react-navigation-redux-helpers": "^3.0.2",
"react-navigation-tabs": "^2.2.0",
"react-redux": "^5.0.3", "react-redux": "^5.0.3",
"redux": "^3.6.0", "redux": "^3.6.0",
"redux-thunk": "^2.3.0" "redux-thunk": "^2.3.0"
......
src/constants/Layout.js
import { Dimensions } from 'react-native'; import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width; export const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height; export const height = Dimensions.get('window').height;
export default {
window: {
width,
height,
},
isSmallDevice: width < 375,
};
src/navigation/AppRouteTest.js 0 → 100644
import { createStackNavigator } from 'react-navigation';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import {
createReduxContainer,
createReactNavigationReduxMiddleware,
createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { Provider, connect } from 'react-redux';
import React from 'react';
import PageOne from '../screens/private/PageOne';
import PageTwo from '../screens/private/PageTwo';
import LoginPage from '../screens/public/LoginPage';
import HomePage from '../screens/private/HomePage';
const AppNavigator = createStackNavigator(
{
HomePage: { screen: HomePage },
LoginPage: { screen: LoginPage },
PageOne: { screen: PageOne },
PageTwo: { screen: PageTwo },
},
{
headerMode: 'none',
initialRouteName: 'HomePage',
}
);
const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
nav: navReducer,
});
const middleware = createReactNavigationReduxMiddleware(state => state.nav);
const App = createReduxContainer(AppNavigator);
const mapStateToProps = state => ({
state: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(App);
const store = createStore(appReducer, applyMiddleware(middleware));
class AppRouterComponent extends React.Component {
render() {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
);
}
}
export default AppRouterComponent;
src/navigation/AppRouter.js
import React, { Component } from 'react' import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux' import { Router, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux' import { Provider } from 'react-redux';
import store from '../store' import store from '../store';
import PageOne from '../screens/private/pageOne' import PageOne from '../screens/private/PageOne';
import PageTwo from '../screens/private/pageTwo' import PageTwo from '../screens/private/PageTwo';
import LoginPage from '../screens/public/LoginPage';
import HomePage from '../screens/private/HomePage';
class AppRouter extends Component { class AppRouterComponent extends Component {
render() { render() {
return ( return (
<Provider store={store}> <Provider store={store}>
<Router hideNavBar> <Router>
<Scene key="root"> <Scene key="root" hideNavBar>
<Scene key="pageOne" component={PageOne} initial={true} /> <Scene key="HomePage" component={HomePage} initial={true} />
<Scene key="pageTwo" component={PageTwo} /> <Scene key="PageOne" component={PageOne} />
<Scene key="PageTwo" component={PageTwo} />
<Scene key="LoginPage" component={LoginPage} />
</Scene> </Scene>
</Router> </Router>
</Provider> </Provider>
) );
} }
} }
export default AppRouter export default AppRouterComponent;
src/screens/private/HomePage.js 0 → 100644
import React, { Component } from 'react';
import { Container, Content, Footer, Icon, Tabs, Tab, TabHeading, Text, Button, View } from 'native-base';
import { Header } from 'react-native-elements';
import PageOne from './PageOne';
import PageTwo from './PageTwo';
import { width, height } from '../../constants/Layout';
const LeftComponent = () => <Icon name="menu" style={{ color: 'white', fontSize: 24 }} />;
const RightComponent = () => <Icon name="notifications" style={{ color: 'white', fontSize: 24 }} />;
const BottomTabs = [
{ icon: 'home', label: 'Hello1', content: <PageOne /> },
{ icon: 'navigate', label: 'Hello2', content: <PageTwo /> },
{ icon: 'navigate', label: 'Hello3' },
];
class HomePage extends Component {
state = {
activeIndex: 0,
};
renderButtonTabs = () => {
return (
<Tabs
tabContainerStyle={{ backgroundColor: '#fbfbfb' }}
tabBarPosition="overlayBottom"
tabBarUnderlineStyle={{
backgroundColor: 'red',
top: 0,
width: width / 6,
marginLeft: width / 12,
}}
onChangeTab={({ i }) => {
this.setState({ activeIndex: i });
}}
>
{BottomTabs.map((tab, index) => (
<Tab
style={{ backgroundColor: 'transparent' }}
key={index + tab.label}
heading={
<TabHeading
style={{
borderTopLeftRadius: index === 0 ? 10 : 0,
borderTopRightRadius: index === BottomTabs.length - 1 ? 10 : 0,
backgroundColor: '#fff',
flexDirection: 'column',
}}
>
<Icon
style={{
fontSize: 20,
color: this.state.activeIndex === index ? 'red' : '#b9babc',
}}
name={tab.icon}
/>
<Text
style={{
fontSize: 10,
color: this.state.activeIndex === index ? 'red' : '#b9babc',
}}
>
{tab.label}
</Text>
</TabHeading>
}
>
<Content>{tab.content}</Content>
</Tab>
))}
</Tabs>
);
};
render() {
// console.log(this.props);
return (
<Container>
<Header
statusBarProps={{ barStyle: 'light-content' }}
backgroundColor="#f44c4c"
leftComponent={<LeftComponent />}
centerComponent={{
text: 'Untitled',
style: { color: '#fff', fontFamily: 'Avenir_Roman', fontSize: 16 },
}}
rightComponent={<RightComponent />}
/>
{this.renderButtonTabs()}
</Container>
);
}
}
export default HomePage;
src/screens/private/pageOne.js → src/screens/private/PageOne.js
import React, { Component } from 'react' import React, { Component } from 'react';
import { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base' import { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base';
import { Actions } from 'react-native-router-flux' import { connect } from 'react-redux';
import { bindActionCreators } from 'redux' import { increment, decrement } from '../../store/actions';
import { connect } from 'react-redux' import { Actions } from 'react-native-router-flux';
import { increment, decrement } from '../../store/actions'
class pageOne extends Component { class PageOne extends Component {
render() { render() {
console.log(this.props)
return ( return (
<Container> <Container>
<Header> <Header iosBarStyle="light-content">
<Body> <Body>
<Title>{this.props.sceneKey}</Title> <Title>Page One</Title>
</Body> </Body>
</Header> </Header>
<Content padder> <Content padder style={{ backgroundColor: '#fbfbfb' }}>
<Card> <Card>
<CardItem> <CardItem>
<Body> <Body>
...@@ -27,8 +25,10 @@ class pageOne extends Component { ...@@ -27,8 +25,10 @@ class pageOne extends Component {
dark dark
bordered bordered
onPress={() => { onPress={() => {
Actions.pageTwo() Actions.PageTwo();
}}> // this.props.navigation.navigate('PageTwo');
}}
>
<Text>Goto Page 2</Text> <Text>Goto Page 2</Text>
</Button> </Button>
<Card> <Card>
...@@ -44,19 +44,20 @@ class pageOne extends Component { ...@@ -44,19 +44,20 @@ class pageOne extends Component {
</Button> </Button>
</Content> </Content>
</Container> </Container>
) );
} }
} }
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
// nav: state.nav,
count: state.count, count: state.count,
} };
} };
const mapDispatchToProps = { increment, decrement } const mapDispatchToProps = { increment, decrement };
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(pageOne) )(PageOne);
src/screens/private/pageTwo.js → src/screens/private/PageTwo.js
import React, { Component } from 'react' import React, { Component } from 'react';
import { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base' import { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base';
import { Actions } from 'react-native-router-flux' import { Actions } from 'react-native-router-flux';
class pageTwo extends Component { class PageTwo extends Component {
render() { render() {
// console.log(this.props)
return ( return (
<Container> <Container>
<Header> <Header>
...@@ -25,13 +24,15 @@ class pageTwo extends Component { ...@@ -25,13 +24,15 @@ class pageTwo extends Component {
bordered bordered
style={{ alignSelf: 'center', margin: 30 }} style={{ alignSelf: 'center', margin: 30 }}
onPress={() => { onPress={() => {
Actions.pop() Actions.pop();
}}> // this.props.navigation.navigate('PageOne');
}}
>
<Text>Goto Page 1</Text> <Text>Goto Page 1</Text>
</Button> </Button>
</Content> </Content>
</Container> </Container>
) );
} }
} }
export default pageTwo export default PageTwo;
src/screens/public/LoginPage.js 0 → 100644
import React, { Component } from 'react';
import { Container, Content, Text, Card, Header, H1 } from 'native-base';
class LoginPage extends Component {
state = {};
render() {
return (
<Container>
<Header transparent />
<Content padder style={{ paddingHorizontal: 16 }}>
<Text style={{ textAlign: 'center', fontFamily: 'Avenir_Roman', fontSize: 36 }}>Login</Text>
<Card style={{ marginTop: 40 }}>
<Text>Hello</Text>
</Card>
</Content>
</Container>
);
}
}
export default LoginPage;
src/store/reducers/index.js
import { combineReducers } from 'redux' import { combineReducers } from 'redux';
import routes from './routes' // import routes from './routes';
import countReducer from './countReducer.js' import countReducer from './countReducer.js';
export default combineReducers({ export default combineReducers({
// routes, // routes,
count: countReducer, count: countReducer,
// ... other reducers // ... other reducers
}) });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment