혼자하기] Navigator 연결하여 페이지 이동

수정해야 할 페이지 StackNavigator 와 MainPage

 

과정 : 소개페이지 만들어넣기 -> 네비게이터를 이용해서 소개페이지로 이동하도록 연결

 

위치 확인 : 오늘의 날씨 아랫쪽에 위치해야함

넣어야할곳은 그림과 오늘의날씨 사이에 넣어야함.

 

구성은 버튼 + 텍스트

간단하게 버튼은 TouchableOpacity 

<TouchableOpacity> </TouchableOpacity>

 

텍스트는 Text 를 이용하면될듯함

<Text></Text>

 

 

 

 

버튼의 구성은 아래.

<TouchableOpacity><Text>소개 페이지</Text></TouchableOpacity>

스타일적용 하기.

<TouchableOpacity style={styles.jjimpage}><Text style={styles.jjimpageText}>소개 페이지</Text></TouchableOpacity>

const styles= StyleSheet.create({ 에는 

  jjimpage: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#20b2aa",
    borderColor:"deeppink",
    borderRadius:15,
    margin:7,
    alignSelf:'flex-end'
  },
  jjimpageText: {
    color:"#fff",
    fontWeight:"700",
    //텍스트의 현재 위치에서의 정렬 
    textAlign:"center"
  },

버튼 모양새가 갖춰졌다.

 

이제 네비게이터를 연결하여 페이지 이동구현해야한다.

버튼을 클릭했을때 구현은 onPress{()=>dd}

onPress={()=>{navigation.navigate('AboutPage')}}

네비게이션을 연결했다.

 

StackNavigator.js (스택네비게이터 라이브러리를 가져온 페이지)수정이 조금필요하다.

import AboutPage from '../pages/AboutPage';

 <Stack.Screen name="AboutPage" component={AboutPage}/>

 

소개페이지 윗줄에 이름넣는방법

   useEffect(()=>{
        navigation.setOptions({
            title:"소개 페이지",
            headerStyle: {
                backgroundColor: '#1F266A',
                shadowColor: "#1F266A",
            },
            headerTintColor: "#fff",
        })
    },[])

그리고 스테이터스바 색상변경필요함. 

<StatusBar style="light" />

 

 

ㅁ맵함수에 대한 공부가 좀 더 필요할것같음.

 content 의 갯수만큼 반복한다음 각각 [0] [1] 반복해서 보여준다는것같은데.... 

    <ScrollView style={styles.container}>
           {
               tip.map((content,i)=>{
                   return(<LikeCard key={i} content={content} navigation={navigation}/>)
               })
           }
        </ScrollView>