export function createReducer(initialState, handlers) {
return (state = initialState, action) =>
handlers.hasOwnProperty(action.type)
? handlers[action.type](state, action)
: state;
}
import React from "react";
import { StyleSheet, Text, View, Platform, ScrollView, TouchableOpacity, Alert } from "react-native";
import { Router, Route, NavLink } from "./react-router";
const About = () => <Text>About</Text>;
const History = () => <Text>History</Text>;
const style = styles();
const App = () => (
<Router>
<ScrollView contentContainerStyle={styles.container}>
<Route exact path="/" component={About} />
<Route path="/history" component={History} />
<View style={styles.nav}>
<NavLink to="/" style={{
width: '50%',
height: '100%',
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
justifyContent: 'center',
}}>
<TouchableOpacity
onPress={() => Alert.alert('Button pressed')}
style={styles.center}
>
<Text style={styles.btnText}>About</Text>
</TouchableOpacity>
</NavLink>
<NavLink to="/history" style={{
width: '50%',
height: '100%',
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
justifyContent: 'center',
}}>
<TouchableOpacity
onPress={() => Alert.alert('Button pressed')}
style={styles.center}
>
<Text style={styles.btnText}>History</Text>
</TouchableOpacity>
</NavLink>
</View>
</ScrollView>
</Router>
);
const styles = StyleSheet.create({
container: {
padding: 10,
position: 'relative',
display: 'flex',
alignItems: 'center',
},
nav: {
position: 'fixed',
bottom: '2.4%',
width: '91.3%',
flexDirection: 'row',
justifyContent: 'space-evenly',
backgroundColor: 'rgba(255, 255, 255, 1)',
boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
borderRadius: 20,
height: 64,
},
center: {
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
btnText: {
fontFamily: 'Raleway-Medium',
fontSize: '16px',
},
});
export default App;
https://stackoverflow.com/questions/68594438/how-t...