나만의꿀팁개발 - 버튼정렬이 안돼..

<View>
 <TouchableOpacity style={styles.button} onPress={()=>detail()}><Text style={styles.buttonText}>자세히보기</Text></TouchableOpacity>
 <TouchableOpacity style={styles.button} onPress={()=>remove()}><Text style={styles.buttonText}>찜 해제</Text></TouchableOpacity>
</View>

버튼끼리 묶었다. 그리고 버튼스타일을 지정해주기위해 버튼 스타일적용했다.

버튼정렬을해야하는데 ....

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   buttonGroup:{
      flexDirection:"row"
    }

간단했다.. 

버튼을 묶는 하나의 view에 스타일을 적용해서 

flexDirection을 적용하면 되는거였다.

 

 

 

 

 

 

 

 

 

 

 

 

여기에 자세히보기를 눌렀을때 디테일페이지 이동하게 적용하기위해서는

<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>

이전에 이용했던 TouchableOpacity 로 하나로 묶으면 될것같다.

 

return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        
        <View style={styles.card}>
          <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}> 
            <Image style={styles.cardImage} source={{uri:content.image}}/>
           
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
                  
                <View style={styles.buttonGroup}>
                    <TouchableOpacity style={styles.button} onPress={()=>detail()}><Text style={styles.buttonText}>자세히보기</Text></TouchableOpacity>
                    <TouchableOpacity style={styles.button} onPress={()=>remove()}><Text style={styles.buttonText}>찜 해제</Text></TouchableOpacity>
              
                </View>
                
            </View>
            
            </TouchableOpacity>
      
        </View>
    )

뭔가 엉성하다 자세히보기와 찜해제 버튼 아래에도 줄이 한줄 생긴다.

스타일이 두번들어갔다.

하나를 없애면 될듯하다.

.

return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        
  
          <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}> 
            <Image style={styles.cardImage} source={{uri:content.image}}/>
           
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
                  
                <View style={styles.buttonGroup}>
                    <TouchableOpacity style={styles.button} onPress={()=>detail()}><Text style={styles.buttonText}>자세히보기</Text></TouchableOpacity>
                    <TouchableOpacity style={styles.button} onPress={()=>remove()}><Text style={styles.buttonText}>찜 해제</Text></TouchableOpacity>
              
                </View>
                
            </View>
            
            </TouchableOpacity>
    )

View태그는 필요없다. 왜냐면 TouchableOpacity로 묶고있기때문에..

자세히보기 버튼에 묶으려고했는데 뭔가 좀 이상하다 왠지 카드를 눌러서 봐야 할것같은 느낌?

근데 눌러보니 카드를 아무리 눌러도 자세히보기가 안되는 느낌이들어 자세히보기 버튼눌러도 내용을 볼 수 있고 카드를 눌러도 내용을 볼 수 있게 만들었다.

추후 찜해제 버튼은 밖으로 빼야할것같다. 왜냐면 현재는 찜해제 버튼을 눌러도 디테일페이지로 넘어갈것이다.

라고 생각했으나 아니다.

왜냐하면 onPress에 detail() 을 선언했다. 

찜해제버튼에는  onPress에 remove()를 선언했기때문에 이동하지않는다.

   const detail = () => {
        navigation.navigate('DetailPage',{idx:content.idx})
    }

    const remove = () => {

    }

튜터님께서 리턴 윗쪽부분에 이미 선언해놨다.

그렇다면 카드를 눌러도 디테일페이지로 이동하도록 하는 코드도 줄일 수 있다.

onPress={()=>detail()}>  이렇게.

하면 같다. 아마도 같을수바께없음.

return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        
        
          <TouchableOpacity style={styles.card} onPress={()=>detail()}> 
            <Image style={styles.cardImage} source={{uri:content.image}}/>
           
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
                  
                <View style={styles.buttonGroup}>
                    <TouchableOpacity style={styles.button} onPress={()=>detail()}><Text style={styles.buttonText}>자세히보기</Text></TouchableOpacity>
                    <TouchableOpacity style={styles.button} onPress={()=>remove()}><Text style={styles.buttonText}>찜 해제</Text></TouchableOpacity>
              
                </View>
                
            </View>
            </TouchableOpacity>
      
        
    )