[ReactNative]Timer앱 컴포넌트!

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import Timer from './components/Timer'

export default class App extends React.Component {

render() {

return <Timer />

}

}

App.js  특이사항 없음

import React, { Component } from 'react';

import { View, Text, StyleSheet, StatusBar } from "react-native"

import Button from "../Button"

class Timer extends Component{

render(){

return(

<View style={styles.container}>

<StatusBar barStyle={"light-content"} />

<View style={styles.upper}>

<Text style={styles.time}>25:00</Text>

</View>

<View style={styles.lower}>

<Button iconName="play-circle" onPress={() => alert("it works!")} />

<Button iconName="stop-circle" onPress={() => alert("it works!")} />

</View>

</View>

)

}

}

const styles = StyleSheet.create({

container: {

flex:1,

backgroundColor:"#CE0B24"

},

upper : {

flex:1,

justifyContent:"center",

alignItems : "center"

},

lower : {

flex:1,

justifyContent:"center",

alignItems : "center"

},

time : {

color : "white",

fontSize : 120,

fontWeight : "100"

}

})

export default Timer;

Timer index.js StatusBar는 위에 상태표시창 뷰를 컨트롤 할 수 있는 컴포넌트 barStyle이라는 내부 요소로 하얀 색으로 바꿈

import React from 'react';

import PropTypes from 'prop-types';

import { View, TouchableOpacity} from 'react-native';

import { FontAwesome } from "@expo/vector-icons";

function Button({iconName, onPress}){

return(

<TouchableOpacity onPressOut={onPress}>

<FontAwesome name={iconName} size={80} color="white" />

</TouchableOpacity>

)

}

Button.PropTypes = {

iconName : PropTypes.string.isRequired,

onPress: PropTypes.func.isRequired,

}

export default Button;

TouchableOpacity는 컴포넌트를 포커스? 시에 자동으로 투명도가 높아지도록 해서 클릭한 느낌을 들게함

FontAwesome은 아이콘

Button index.js