React-Native 화면이동3

뭘잘못했는지 이유를 잘모르겠음

화면이 두번이상 안넘어가서 원인을 찾아보는중 App.js에서만 Navigatior선언을 해놔서 그런것이 아닌가 의심

구글링해서 내가 하고싶은대로 한거 찾아냄 정리함

 

App.js

import React, {Component} from 'react';

import {createStackNavigator, createAppContainer} from 'react-navigation';

import firstpage from './First';

import secondpage from './Second';



const App = createStackNavigator(

    {

        Home: {screen:firstpage},

        Second: {screen:secondpage}
        
        ..
        
        ..
        
        ..이런식으로 계속 쌓아놓으면 다른곳에서 쓸수있을거라 생각됨

    },

    {initialRouteName: 'Home', headerMode: 'none'} //이걸로 아마 시작페이지를 결정하는것이 아닌가

);



export default createAppContainer(App);

App.js에 이런식으로 코드 해놓음

 

First.js

import React, {Component} from 'react';

import {View, Text, TouchableOpacity} from 'react-native';



class First extends Component {

    render() {

        const {navigation} = this.props;

        return (

            <View style={{flex: 1, justifyContent: 'center'}}>

                <TouchableOpacity

                        onPress={()=> {navigation.navigate("Second")}}

                >

                    <Text>

                        This is First

                    </Text>

                </TouchableOpacity>

            </View>

        );

    }

}




export default First;

이게 첫번째 화면 This is First를 누르면 Second로 넘어가는거같음

 

Second.js

import React, {Component} from 'react';

import {Text,View,TouchableOpacity} from 'react-native';

class Second extends Component {

    render() {



        const {navigation} = this.props;



        return (

            <View style={{flex:1,justifyContent: 'center'}} >

                <TouchableOpacity

                        onPress={()=>{

                            navigation.goBack()

                        }}

                >

                    <Text style={{alignItems: 'center'}}>Second Page</Text>

                </TouchableOpacity>

            </View>

        );

    }

}



export default Second;

본건 second까지지만 목표는 뒤로가는게 아니라 다음에 다음페이지 까지 만들어서 이동시키는것

 

보다가 헷갈리는거있으면 여기가서 다시보기

출처 : philip1994.tistory.com/96

[react-native] react-navigation사용하기

 

화면이동1,2 가 안되는게아님 설정을 뭔가 잘못해서 그런거같음 두번이동이 하고싶을때 이거보기