Texi App UI 실습2

변경점
Main_Setting_NickName.tsx 추가

import { JSX } from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, FlatList } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation, ParamListBase } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";

function Main_Setting() : JSX.Element {
    console.log("-- Main_Setting()")

    const navigation = useNavigation<StackNavigationProp<ParamListBase>>()

    const onLogout = () => {
        AsyncStorage.removeItem('userId').then(() => {
            navigation.popToTop()
        })
    }

    let arrSetMenu=[
        {id:0, name:'로그아웃'},
        {id:1, name:'닉네임 설정'}
    ]

    return (
        <SafeAreaView style={styles.container}>
            <FlatList style={{width:"100%"}}
            data={arrSetMenu}
            renderItem={({item}) => {
                //console.log("row =" + JSON.stringify(row))
                if (item.id === 0) {
                    return (
                        <TouchableOpacity style={[styles.container]} onPress={onLogout}>
                            <Text style={styles.textForm}>{item.name}</Text>
                        </TouchableOpacity>
                    )
                }
                else if (item.id===1) {
                    return (
                        <TouchableOpacity style={[styles.container]} onPress={() => navigation.navigate("NickName")}>
                            <Text style={styles.textForm}>{item.name}</Text>
                        </TouchableOpacity>
                    )
                }
            }}
            keyExtractor={(item:any) => item.id}
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textForm: {
        borderWidth: 1,
        borderColor: '#3498db',
        padding: 20,
        width: '100%',
        fontSize: 18,
        textAlign: 'center',
        color: '#3498db',
        marginBottom: 2
    }
})

export default Main_Setting

TaxiApp.tsx

import { JSX } from "react";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import Intro from './Intro'
import Main from './Main'
import Login from './Login'
import Register from './Register'
import NickNameScreen from "./Main_Setting_NickName";


function TaxiApp() : JSX.Element {

    console.log("-- TaxiApp()")

    const Stack = createStackNavigator()

    return (
       <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name='intro' component={Intro}
                options={{headerShown:false}}/>
                <Stack.Screen name='Login' component={Login}
                options={{headerShown:false}}/>
                <Stack.Screen name='Register' component={Register}
                options={{headerShown:true, title: '회원가입'}}/>
                <Stack.Screen name='Main' component={Main}
                options={{headerShown:false}}/>
                <Stack.Screen name='NickName' component={NickNameScreen}
                options={{headerShown:false}}/>
            </Stack.Navigator>

       </NavigationContainer>    
    )
    
}

const styles = StyleSheet.create({
    textBlack: {
        fontSize: 18,
        color: 'black'
    },
    textBlue: {
        fontSize: 18,
        color: 'blue'
    }
})

export default TaxiApp

Main_Setting.tsx

import { JSX } from "react";
import { SafeAreaView, StyleSheet, Text, TouchableOpacity, FlatList } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation, ParamListBase } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";

function Main_Setting() : JSX.Element {
    console.log("-- Main_Setting()")

    const navigation = useNavigation<StackNavigationProp<ParamListBase>>()

    const onLogout = () => {
        AsyncStorage.removeItem('userId').then(() => {
            navigation.popToTop()
        })
    }

    let arrSetMenu=[
        {id:0, name:'로그아웃'},
        {id:1, name:'닉네임 설정'}
    ]

    return (
        <SafeAreaView style={styles.container}>
            <FlatList style={{width:"100%"}}
            data={arrSetMenu}
            renderItem={({item}) => {
                //console.log("row =" + JSON.stringify(row))
                if (item.id === 0) {
                    return (
                        <TouchableOpacity style={[styles.container]} onPress={onLogout}>
                            <Text style={styles.textForm}>{item.name}</Text>
                        </TouchableOpacity>
                    )
                }
                else if (item.id===1) {
                    return (
                        <TouchableOpacity style={[styles.container]} onPress={() => navigation.navigate("NickName")}>
                            <Text style={styles.textForm}>{item.name}</Text>
                        </TouchableOpacity>
                    )
                }
            }}
            keyExtractor={(item:any) => item.id}
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textForm: {
        borderWidth: 1,
        borderColor: '#3498db',
        padding: 20,
        width: '100%',
        fontSize: 18,
        textAlign: 'center',
        color: '#3498db',
        marginBottom: 2
    }
})

export default Main_Setting