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 @@
"trailingComma": "es5",
"tabWidth": 4,
"singleQuote": true,
"jsxBracketSameLine": true,
"jsxBracketSameLine": false,
"useTabs": true
}
App.js
import { AppLoading } from 'expo'
import * as Font from 'expo-font'
import React, { useState } from 'react'
import { Ionicons } from '@expo/vector-icons'
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import React, { useState } from 'react';
import { Ionicons } from '@expo/vector-icons';
import AppRouter from './src/navigation/AppRouter'
import AppRouter from './src/navigation/AppRouter';
const loadResourcesAsync = async () => {
await Promise.all([
......@@ -12,25 +12,24 @@ const loadResourcesAsync = async () => {
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...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
// 'space-mono': require('./src/assets/fonts/SpaceMono-Regular.ttf'),
Avenir_Roman: require('./src/assets/fonts/Avenir-Roman.ttf'),
}),
])
}
]);
};
const handleLoadingError = (error: Error) => {
// In this case, you might want to report the error to your error reporting
// service, for example Sentry
console.warn(error)
}
console.warn(error);
};
const handleFinishLoading = setLoadingComplete => {
setLoadingComplete(true)
}
setLoadingComplete(true);
};
const Application = props => {
const [isLoadingComplete, setLoadingComplete] = useState(false)
const [isLoadingComplete, setLoadingComplete] = useState(false);
if (!isLoadingComplete && !props.skipLoadingScreen) {
return (
......@@ -39,10 +38,10 @@ const Application = props => {
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
)
);
} else {
return <AppRouter />
return <AppRouter />;
}
}
};
export default Application
export default Application;
package.json
......@@ -27,11 +27,12 @@
"react-native-animatable": "^1.3.2",
"react-native-elements": "^1.1.0",
"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-web": "^0.11.4",
"react-navigation": "^3.11.0",
"react-navigation-redux-helpers": "^3.0.2",
"react-navigation-tabs": "^2.2.0",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-thunk": "^2.3.0"
......
src/constants/Layout.js
import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default {
window: {
width,
height,
},
isSmallDevice: width < 375,
};
export const width = Dimensions.get('window').width;
export const height = Dimensions.get('window').height;
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 { Router, Scene } from 'react-native-router-flux'
import { Provider } from 'react-redux'
import store from '../store'
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux';
import store from '../store';
import PageOne from '../screens/private/pageOne'
import PageTwo from '../screens/private/pageTwo'
import PageOne from '../screens/private/PageOne';
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() {
return (
<Provider store={store}>
<Router hideNavBar>
<Scene key="root">
<Scene key="pageOne" component={PageOne} initial={true} />
<Scene key="pageTwo" component={PageTwo} />
<Router>
<Scene key="root" hideNavBar>
<Scene key="HomePage" component={HomePage} initial={true} />
<Scene key="PageOne" component={PageOne} />
<Scene key="PageTwo" component={PageTwo} />
<Scene key="LoginPage" component={LoginPage} />
</Scene>
</Router>
</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 { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base'
import { Actions } from 'react-native-router-flux'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { increment, decrement } from '../../store/actions'
import React, { Component } from 'react';
import { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base';
import { connect } from 'react-redux';
import { increment, decrement } from '../../store/actions';
import { Actions } from 'react-native-router-flux';
class pageOne extends Component {
class PageOne extends Component {
render() {
console.log(this.props)
return (
<Container>
<Header>
<Header iosBarStyle="light-content">
<Body>
<Title>{this.props.sceneKey}</Title>
<Title>Page One</Title>
</Body>
</Header>
<Content padder>
<Content padder style={{ backgroundColor: '#fbfbfb' }}>
<Card>
<CardItem>
<Body>
......@@ -27,8 +25,10 @@ class pageOne extends Component {
dark
bordered
onPress={() => {
Actions.pageTwo()
}}>
Actions.PageTwo();
// this.props.navigation.navigate('PageTwo');
}}
>
<Text>Goto Page 2</Text>
</Button>
<Card>
......@@ -44,19 +44,20 @@ class pageOne extends Component {
</Button>
</Content>
</Container>
)
);
}
}
const mapStateToProps = state => {
return {
// nav: state.nav,
count: state.count,
}
}
};
};
const mapDispatchToProps = { increment, decrement }
const mapDispatchToProps = { increment, decrement };
export default connect(
mapStateToProps,
mapDispatchToProps
)(pageOne)
)(PageOne);
src/screens/private/pageTwo.js → src/screens/private/PageTwo.js
import React, { Component } from 'react'
import { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base'
import { Actions } from 'react-native-router-flux'
import React, { Component } from 'react';
import { Container, Content, Text, Card, Header, Body, Button, Title, CardItem } from 'native-base';
import { Actions } from 'react-native-router-flux';
class pageTwo extends Component {
class PageTwo extends Component {
render() {
// console.log(this.props)
return (
<Container>
<Header>
......@@ -25,13 +24,15 @@ class pageTwo extends Component {
bordered
style={{ alignSelf: 'center', margin: 30 }}
onPress={() => {
Actions.pop()
}}>
Actions.pop();
// this.props.navigation.navigate('PageOne');
}}
>
<Text>Goto Page 1</Text>
</Button>
</Content>
</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 routes from './routes'
import countReducer from './countReducer.js'
import { combineReducers } from 'redux';
// import routes from './routes';
import countReducer from './countReducer.js';
export default combineReducers({
// routes,
count: countReducer,
// ... 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