리액트네이티브, 화면 전환

 

StartGameScreen.js

function StartGameScreen({onPickNumber}) {

  const [enteredNumber, setEnteredNumber] = useState('');

  function numberInputHandler(enteredText) {

    setEnteredNumber(enteredText);

  }

  function resetInputHandler() {

    setEnteredNumber('')

  }

  function confirmInputHandler() {

    const chosenNumber = parseInt(enteredNumber);

    if(isNaN(chosenNumber) || chosenNumber <= 0 || chosenNumber > 99) {

      Alert.alert(

        '메시지',

        '입력을 확인해주세요.',

        [{text: '확인', style: 'destructive', onPress: resetInputHandler}])

      return;

    }

    onPickNumber(chosenNumber)

  }

검증된 숫자일 경우 onPickNumber 실행

 

 

 

App.js

import { StyleSheet, ImageBackground } from 'react-native';

import {LinearGradient} from 'expo-linear-gradient';

import StartGameScreen from './screens/StartGameScreen';

import GameScreen

 from './screens/GameScreen';

import { useState } from 'react';

export default function App() {

  const [userNumber, setUserNumber] = useState();

  function pickedNumberHandler(pickedNumber) {

    setUserNumber(pickedNumber)

  }

/////  화면 컴포넌트 

  let screen = <StartGameScreen onPickNumber={pickedNumberHandler}/>

  if(userNumber) {

    screen = <GameScreen />

  }

/////  화면 컴포넌트

  return <LinearGradient colors={['#4e0329','#ddb52f']} style={styles.rootScreen}>

    <ImageBackground

      source={require('./assets/images/background.png')}

      resizeMode="cover"

      style={styles.rootScreen}

      imageStyle={styles.backgroundImage}

    >

      {screen}

    </ImageBackground>

  </LinearGradient>;

}

초기화면에서 검증된 숫자가 넘어오면 GameScreen으로 전환