import React, {useEffect} from 'react'
import {View,Text,StyleSheet,Image, TouchableOpacity, Linking, Button} from 'react-native'
import {StatusBar} from 'expo-status-bar';

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

    <View style={styles.container}>
        <StatusBar style="light" />
      <Text style={styles.title}>HI! 스파르타 코딩 앱개발반에 오신것을 환영합니다.</Text>
     
   
      <View style={styles.textContainer}>
        <Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>
       
        <Text style={styles.desc01}>많은 내용을 간결하게 담아내려 노력했습니다!.</Text>
        <Text style={styles.desc02}>꼭 완주 하셔서 꼭 여러분 것으로 만들어 가시길 바랍니다.</Text>
                         
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>여러분의 인스타계정</Text>
          {/* 링크 다는 방법을..모르겟습니다..ㅠ */}
 
*검색해서 링크다는법을 찾아서 적용시켜봐도 오류만 계속떴다,
a태그 button태그 등등 여러가지 태그를 사용해봤지만 무리였다!!*
 
        </TouchableOpacity>
      </View>
    </View>)
}

const styles = StyleSheet.create({ /*스타일시트*/
      container:{
        flex:1,     /*flex-start, center, flex-end*/
        /*flex는 영역을 차지하는 속성*/
        backgroundColor:"#1F266A", /*배경색*/
        alignItems:"center" /*항목정렬 중앙*/
      },
      title:{
        fontSize:30,
        fontWeight:"700", /*폰트굵기*/
        color:"#fff",
        paddingLeft:30, /*여백*/
        paddingTop:100, /*여백*/
        paddingRight:30}, /*여백*/
        /*margin-> border-> padding-> content 여백 순서*/

      textContainer:{
        width:300,
        height:500,
        backgroundColor:"#fff",
        marginTop:50,
        borderRadius:30,
        justifyContent:"center",/*가로축 중심*/
        alignItems:"center"},/*세로축 중심*/

      aboutImage:{
        width:150,
        height:150,
        borderRadius:30}, //테두리를 둥글게만듬

      desc01:{
        textAlign:"center",
        fontSize:20,
        fontWeight:"700",
        paddingLeft:22,
        paddingRight:22},

      desc02:{
        textAlign:"center",
        fontSize:15,
        fontWeight:"700",
        padding:22},

      button:{
        backgroundColor:"orange",
        /*배경색 주황색, 직접적으로 색코드를 입력해도 되지만 색자체를
        입력함으로써 표준색 가능 */
        padding:20,
        borderRadius:15},

      buttonText:{
        color:"#fff",
        fontSize:15,
        fontWeight:"700"}
      })

 

 

 

 

꿀팁 페이지 만들기 

import React,{useState, useEffect} from 'react';
import {ScrollView, Text, StyleSheet} from 'react-native';
import LikeCard from '../components/LikeCard';
import Card from '../components/Card';

export default function LikePage({navigation,route}){
   
    const [tip, setTip] = useState([{
            "idx":3,
            "category":"재테크",
            "title":"잠자는 내 돈을 찾아라",
            "desc":"‘새는 돈’에는 미처 몰랐던 카드 포인트, 휴면예금이나 환급금도 포함됩니다. 확실히 파악하지 못한 잠자는 돈을 찾아보고 자투리 돈들을 모으는 것도 중요합니다. 케이블방송, 위성방송 서비스를 이용하면서 중복 납부한 요금, 셋톱박스 보증금 등 돌려받지 않은 돈이 있는지 확인 해보세요. 또, 카드 포인트 통합 조회 서비스를 이용해 여러 개의 카드 포인트가 모두 얼마인지 체크해두는 것이 좋습니다. 보험해약 환급금, 휴면 보험금이나 휴면 예금을 찾아보고 돌려받는 일도 요즘에는 어렵지 않습니다.",
            "date":"2020.09.09"
        },
        {
            "idx":4,
            "category":"재테크",
            "title":"할인행사, 한정할인판매 문구의 함정 탈출!",
            "desc":"‘안 사면 100% 할인’이라는 말 들어보셨나요? 견물생심, 좋은 물건을 보면 사고 싶기 마련입니다. 특히 대대적인 ‘할인 행사’ 중인 대형 마트에 갔을 때는 말할 것도 없겠죠. 따라서 생필품을 살 때, 한꺼번에 사서 사용하는 것보다 필요할 때 조금씩 구매하는 편이 좋습니다. 장을 보면서 대형마트에 자주 가다 보면 지금 필요한 것뿐 아니라 앞으로 필요할 것까지 사게 되어 지출이 커지기 때문입니다. 특히 할인 품목을 보면 뜻하지 않은 소비를 하는 경우도 많아진다. 홈쇼핑, 대형마트 등의 ‘할인행사’, ‘한정할인판매’ 등의 문구를 조심하세요. ",
            "date":"2020.09.09"
    }])

    useEffect(()=>{
        navigation.setOptions({
            title:'꿀팁 찜'
        })
    })

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

const styles = StyleSheet.create({
    container:{
        backgroundColor:"#fff"
    }
})

 

 

+ Recent posts

티스토리툴바