top bar navigation profile
This commit is contained in:
parent
5991ee9471
commit
b7f6bc70bb
|
@ -144,13 +144,13 @@ export default function AreaComun({navigation}){
|
|||
<FormControl isRequired>
|
||||
<FormControl.Label>Hora de inicio</FormControl.Label>
|
||||
<View >
|
||||
<DateTimePicker mode="time" is24Hour={true} value={time} onChangeStart={onChangeStart}/>
|
||||
<DateTimePicker mode="datetime" is24Hour value={time} onChangeStart={onChangeStart}/>
|
||||
</View>
|
||||
</FormControl>
|
||||
<FormControl isRequired>
|
||||
<FormControl.Label>Hora de finalización</FormControl.Label>
|
||||
<View >
|
||||
<DateTimePicker mode="time" is24Hour={true} value={endTime} onChangeEnd={onChangeEnd}/>
|
||||
<DateTimePicker mode="datetime" is24Hour value={endTime} onChangeEnd={onChangeEnd}/>
|
||||
</View>
|
||||
|
||||
</FormControl>
|
||||
|
|
|
@ -4,9 +4,11 @@ import {
|
|||
Box, Button,
|
||||
Center, FormControl, Heading, ScrollView, VStack
|
||||
} from "native-base";
|
||||
import { Dimensions, StyleSheet, TextInput } from "react-native";
|
||||
import { Dimensions, StyleSheet, TextInput, useWindowDimensions } from "react-native";
|
||||
import { UserContext } from "../context/UserContext";
|
||||
import {SceneMap, TabView} from 'react-native-pager-view';
|
||||
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
|
||||
|
||||
const { Navigator, Screen } = createMaterialTopTabNavigator();
|
||||
|
||||
export default function Profile({ navigation }) {
|
||||
|
||||
|
@ -16,20 +18,21 @@ export default function Profile({ navigation }) {
|
|||
const [email, setEmail] = useState();
|
||||
const [password, setPassword] = useState();
|
||||
const [index, setIndex] = useState(0);
|
||||
const layout = useWindowDimensions();
|
||||
|
||||
const [routes] = useState([{
|
||||
key: "first",
|
||||
title: 'Información'
|
||||
}, {
|
||||
key: "second",
|
||||
title: 'Contraseña'}])
|
||||
// const [routes] = useState([{
|
||||
// key: "first",
|
||||
// title: 'Información'
|
||||
// }, {
|
||||
// key: "second",
|
||||
// title: 'Contraseña'}])
|
||||
|
||||
const userData = useContext(UserContext)
|
||||
const id = userData.user._id;
|
||||
|
||||
console.log(userData.user);
|
||||
|
||||
const ProfileView = () => {
|
||||
const ProfileView = () => (
|
||||
|
||||
<ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
|
||||
px: "20px",
|
||||
|
@ -79,9 +82,9 @@ export default function Profile({ navigation }) {
|
|||
|
||||
</ScrollView>
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
const PasswordView = () => {
|
||||
const PasswordView = () => (
|
||||
|
||||
<ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
|
||||
px: "20px",
|
||||
|
@ -126,41 +129,41 @@ export default function Profile({ navigation }) {
|
|||
|
||||
</ScrollView>
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
const initialLayout = {
|
||||
width: Dimensions.get('window').width
|
||||
}
|
||||
// const initialLayout = {
|
||||
// width: Dimensions.get('window').width
|
||||
// }
|
||||
|
||||
const renderScene = SceneMap({
|
||||
first: ProfileView,
|
||||
second: PasswordView
|
||||
})
|
||||
// const renderScene = SceneMap({
|
||||
// first: ProfileView,
|
||||
// second: PasswordView
|
||||
// })
|
||||
|
||||
|
||||
const renderTabBar = props => {
|
||||
const inputRange = props.navigationState.routes.map((x, i) => i);
|
||||
return <Box flexDirection="row">
|
||||
{props.navigationState.routes.map((route, i) => {
|
||||
const opacity = props.position.interpolate({
|
||||
inputRange,
|
||||
outputRange: inputRange.map(inputIndex => inputIndex === i ? 1 : 0.5)
|
||||
});
|
||||
const color = index === i ? useColorModeValue('#000', '#e5e5e5') : useColorModeValue('#1f2937', '#a1a1aa');
|
||||
const borderColor = index === i ? 'cyan.500' : useColorModeValue('coolGray.200', 'gray.400');
|
||||
return <Box borderBottomWidth="3" borderColor={borderColor} flex={1} alignItems="center" p="3" cursor="pointer">
|
||||
<Pressable onPress={() => {
|
||||
console.log(i);
|
||||
setIndex(i);
|
||||
}}>
|
||||
<Animated.Text style={{
|
||||
color
|
||||
}}>{route.title}</Animated.Text>
|
||||
</Pressable>
|
||||
</Box>;
|
||||
})}
|
||||
</Box>;
|
||||
};
|
||||
// const renderTabBar = props => {
|
||||
// const inputRange = props.navigationState.routes.map((x, i) => i);
|
||||
// return <Box flexDirection="row">
|
||||
// {props.navigationState.routes.map((route, i) => {
|
||||
// const opacity = props.position.interpolate({
|
||||
// inputRange,
|
||||
// outputRange: inputRange.map(inputIndex => inputIndex === i ? 1 : 0.5)
|
||||
// });
|
||||
// const color = index === i ? useColorModeValue('#000', '#e5e5e5') : useColorModeValue('#1f2937', '#a1a1aa');
|
||||
// const borderColor = index === i ? 'cyan.500' : useColorModeValue('coolGray.200', 'gray.400');
|
||||
// return <Box borderBottomWidth="3" borderColor={borderColor} flex={1} alignItems="center" p="3" cursor="pointer">
|
||||
// <Pressable onPress={() => {
|
||||
// console.log(i);
|
||||
// setIndex(i);
|
||||
// }}>
|
||||
// <Animated.Text style={{
|
||||
// color
|
||||
// }}>{route.title}</Animated.Text>
|
||||
// </Pressable>
|
||||
// </Box>;
|
||||
// })}
|
||||
// </Box>;
|
||||
// };
|
||||
|
||||
|
||||
const updateInfo = async() => {
|
||||
|
@ -208,14 +211,12 @@ export default function Profile({ navigation }) {
|
|||
|
||||
|
||||
return (
|
||||
<Center>
|
||||
<TabView navigationState={{
|
||||
index,
|
||||
routes
|
||||
}} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={setIndex} initialLayout={initialLayout} style={{
|
||||
marginTop: StatusBar.currentHeight
|
||||
}} />;
|
||||
</Center>
|
||||
|
||||
<Navigator>
|
||||
<Screen name="Perfil" component={ProfileView} />
|
||||
<Screen name="Contraseña" component={PasswordView} />
|
||||
|
||||
</Navigator>
|
||||
|
||||
)
|
||||
|
||||
|
|
|
@ -17,8 +17,10 @@
|
|||
"eject": "expo eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-community/datetimepicker": "4.0.0",
|
||||
"@react-native-community/masked-view": "^0.1.11",
|
||||
"@react-navigation/bottom-tabs": "^6.3.2",
|
||||
"@react-navigation/material-top-tabs": "^6.2.3",
|
||||
"@react-navigation/native": "^6.0.11",
|
||||
"@react-navigation/native-stack": "^6.7.0",
|
||||
"@react-navigation/stack": "^6.2.2",
|
||||
|
@ -31,16 +33,16 @@
|
|||
"react-dom": "17.0.1",
|
||||
"react-native": "0.64.3",
|
||||
"react-native-gesture-handler": "~2.1.0",
|
||||
"react-native-pager-view": "5.4.9",
|
||||
"react-native-reanimated": "~2.3.1",
|
||||
"react-native-safe-area-context": "3.3.2",
|
||||
"react-native-screens": "~3.10.1",
|
||||
"react-native-simple-time-picker": "^1.3.11",
|
||||
"react-native-svg": "12.1.1",
|
||||
"react-native-tab-view": "^3.1.1",
|
||||
"react-native-table-component": "^1.2.2",
|
||||
"react-native-web": "0.17.1",
|
||||
"universal-cookie": "^4.0.4",
|
||||
"@react-native-community/datetimepicker": "4.0.0",
|
||||
"react-native-pager-view": "5.4.9"
|
||||
"universal-cookie": "^4.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.9"
|
||||
|
|
Loading…
Reference in New Issue