ReactNative - 화면이동 버튼 TouchableOpacity

ReactNative - 화면이동 버튼 TouchableOpacity

• TouchableOpacity을 사용해서 버튼을 만들고, 클릭시 Detail로 이동시킨다.

Movies.js

 import React from "react";
 import { Text, TouchableOpacity } from "react-native";
 ​
 // 모든 화면은 navigation Prop를 가지고 있다.
 // navigate 이동시 경로를 적지 않아도 자동으로 찾아준다 
 // (App.js에서 선언된 MainNavigation에 있음)
 export default ({ navigation }) =>
     <>
         <Text>Movies</Text>
         <TouchableOpacity onPress={() => navigation.navigate('Detail')}>
             <Text>Go to detail</Text>
         </TouchableOpacity>
     </>

-

navigation/MainNavigation.js

 import { createStackNavigator, createAppContainer } from "react-navigation";
 import TabNavigation from "./TabNavigation";
 import DetailScreen from "../screens/Detail";
 ​
 const MainNavigation = createStackNavigator(
   {
     Tabs: { screen: TabNavigation, navigationOptions: { header: null } },
     Detail: DetailScreen
   },
   {}
 );
 ​
 export default createAppContainer(MainNavigation);