react로 안드로이드 화면에 기본 style 적용하기 1 (Button / Onpress / Toast ) Android

특별히 생성하는 파일이나 폴더는 없다.

App.tsx

import React, { useState } from "react";
import { Button, Text, View } from "react-native";

/* class App extends React.Component{

  constructor(props:any){
    super(props)

    this.state = {
      count:0
    }
  }

  render() {
      return(
        <View>
          <Text>You clicked{ this.state.count } times</Text>

          <Button title="Click me"
                  onPress={()=>this.setState({count: this.state.count+1})}/>
        </View>
      )
  }
}

export default App */


const App =() =>{

  const[count,setCount] = useState(0) //hook
  //    getter setter     초기값
  //const 때문에 count=0으로 고정되어 있어서 count=10은 못하지만 let c =count로 접근은 가능
 // setCount(12) 은 setter라서 가능

  return(
    <View>                  
          <Text>You clicked{ count } times</Text>

          <Button title="Click me"
                  onPress={()=>setCount(count+1)}/>
    </View>

  )

}

export default App

 

 

App.tsx 실행시 안드로이드 화면

 

CLICK ME 버튼을 누를때마다 you clikced {} time의 {}자리에 클릭수가 반영된다.  

 

 

---

 

src 폴더 생성 > component 폴더 생성 > component 폴더 안에 LikeButton.tsx 파일 생성

 

 

LikeButton.tsx

liked는 useState(false)를 통해 기본 상태가 false로 세팅되어 있다.

LikdBtn이라는 함수로 setLiked 가 호출되면 기본 상태인 like(false)의 반대인 !liked이므로 true가 된다.

 

import React, { useState } from "react";
import { Button, Text, View } from "react-native";


export default function LikeButton(){

    const[liked, setLiked] = useState(false)

    function LikeBtn(){
        setLiked(!liked)
    }


    return(
        <View>
            <Text>LikeButton</Text>
            <Button title={liked?"클릭 on":"클릭 off"} onPress={LikeBtn}/>
        </View>
    )    
}

App.tsx

import React, { useState } from "react";
import { Alert, Button, SafeAreaView, Text, ToastAndroid } from "react-native";
import LikeButton from "./src/component/LikeButton";

//1
function btnClick(){
  console.log("btnClick클릭")
}

//2
const onPress = () => {
  //Alert.alert("home","home 클릭")
  ToastAndroid.show("home button click",ToastAndroid.SHORT)
}
export default function App(){

  //3
  const [liked,setLiked] = useState(false)
  const toggleLiked = () => setLiked(!liked) //처음에 false였던게 호출되면 true로 된다.
  //34번째에 호출되면 처음엔 false여서 click off라 되어있다가 click하면 click on으로 바뀐다.

  /* 함수안에 함수도 사용가능
  function btnClick(){
  console.log("btnClick클릭")
}
  */ 




return(
  <SafeAreaView>
    <Text>Hello Tsx</Text>
 
    <Button title="버튼" onPress={btnClick}></Button>

    <Button title="home" onPress={ onPress }/>

    <Button title={liked? "click on":"click off"} onPress={toggleLiked}/>

    <LikeButton/>
 
  </SafeAreaView>
)
}

App.tsx 실행시 터미널 화면

1번 함수 btnClick때문에 콘솔창에 btnClick이 출력된다.

 

App.tsx 실행시 안드로이드 화면

HOME 버튼을 클릭하면 Toast 로 인한 알림이 뜬다

CLICK OFF는 누르면  CLICK ON으로 변경된다.

 

 

 

 

모든 버튼을 구현한 모습

---