React-Native 화면전환2

import React, { Component } from 'react';
import {StyleSheet, View,Text,TouchableOpacity,} from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer, StackActions } from '@react-navigation/native';

import Screen1 from './Screen1'; //같은 위치에 있는 파일을 import



function _onPress() {
  console.log("버튼클릭을 눌렀을때");
}

function _onPress2({navigation}){
//  console.log("버튼클리2를 눌렀을때")
    navigation.navigate('Screen1');
}
function HomeScreen({navigation}){
  return(
    <View style={{flex:1}}>
      <View style={{height:'10%'}}>
        <Text style={{fontSize:50, textAlign:'center'}}>Start</Text>
      </View>
      <View style={{flexDirection:'row',height:'30%',backgroundColor: 'green'}}>
        <View style={{width:'50%',height:'50%',backgroundColor:'red'}}>
        <TouchableOpacity onPress={()=> _onPress()}>
        <View style={{width:'100%',height:'100%',justifyContent: 'center',alignItems: 'center'}}>
            <Text>버튼클릭</Text>
          </View>
        </TouchableOpacity>
        </View>
        <View style={{width:'50%',height:'50%',backgroundColor:'yellow'}}>
        <TouchableOpacity onPress={()=> navigation.navigate('Screen1')}>
          <View style={{width:'100%',height:'100%',justifyContent: 'center',alignItems: 'center'}}>
            <Text>버튼클릭2</Text>
          </View>
        </TouchableOpacity>
        </View>
      </View>
      <View style={{height:'60%',backgroundColor:'blue'}}/>
    </View>
  );
}
/*function DetailsScreen({navigation}) {
  return (
  
  );
}*/
const Stack = createStackNavigator();
class App extends React.Component {

render(){
  return (
    <NavigationContainer>
    	<Stack.Navigator initialRouteName="Start" headerMode="null">
        {/* initalRouteName은 화면나올때 처음 나오는 화면이름 headerMode는 지우면 위에 제목이 나옴 null로 할경우 없애짐 */}
        <Stack.Screen name="Start" component={HomeScreen}/>
        {/* 이건 함수로 화면구성을 한거임 */}
        <Stack.Screen name="Screen1" component={Screen1}/>
         {/* 스택을 추가하는데 name은 사용할 이름 component는 import한 이름 */}
      </Stack.Navigator>
      </Stack.Navigator>
    </NavigationContainer>
  );
}
};

const styles = StyleSheet.create({
  ButtonClick:{
    
  },
  Button: {
    backgroundColor: '#00ff00',
  },
});

export default App;

화면전환 첫번째꺼가 마음대로 안되서 다시 만듬 주석대로 읽으면됨 screen1파일은 같은위치에 만들었을경우에 ./경로

HomeScreen은 함수안에 디자인을 만들어놓은 형식

Screen1은 .js파일을 따로 만들어서 그파일을 import시켜서 만든거임

 

나중에 봤는데 이해가 안되면

c17an.github.io/react-native/react-navigation-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/ 

[RN] - React Navigation 사용하기

JS파일로 import시키는건 여기서 보고 따라한거임