반응형
'스무디 한 잔 마시며 끝내는 React Native' Counter app을 expo 에서 동일하게 구현해봅니다.
react-native cli 구현 코드는 여기 https://yannichoongs.tistory.com/153
다른 곳에서도 useState Component 를 배우기 위한 가장 기본적인 예제로 활용되는 코드입니다.
$ expo init CounterExample
$ cd CounterExample
$ expo start
[App.js]
- count 값을 setCount() 시 dynamic 하게 변경되도록 useState Component 사용
const [count, setCount] = useState(10);
- image 를 touchableOpacity component 로 감싸 clickable 하게 만든 후
click 시 onPress event 로 setCount() 불러주면서 count 값 변경.
<TouchableOpacity onPress= {() => setCount(count + 1)}>
<Image source={require('./assets/add.png')}/>
</TouchableOpacity>
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import {GlobalStyles} from './GlobalStyles';
export default function App() {
const [count, setCount] = useState(10);
return (
<View style={GlobalStyles.appContainer}>
<StatusBar style="auto" />
<View style={GlobalStyles.topContainer}>
<Text style={GlobalStyles.textContainer}>This is Counter Example</Text>
</View>
<View style={GlobalStyles.midContainer}>
<Text style={GlobalStyles.textContainer}>{count}</Text>
</View>
<View style={GlobalStyles.bottomContainer}>
<TouchableOpacity onPress= {() => setCount(count - 1)}>
<Image
source={require('./assets/remove.png')}
/>
</TouchableOpacity>
<TouchableOpacity onPress= {() => setCount(count + 1)}>
<Image
source={require('./assets/add.png')}/>
</TouchableOpacity>
</View>
</View>
);
}
[GlobalStyles.js]
- styles 만을 위한 별도 js 를 만들어 관리합니다.
import {StyleSheet} from 'react-native';
export const GlobalStyles = StyleSheet.create({
appContainer: {
flex: 1,
backgroundColor: '#ffe',
alignItems: 'center',
justifyContent: 'center',
},
topContainer: {
flexDirection:"row",
flex: 1,
width:'100%',
backgroundColor: '#aaf',
alignItems: 'center',
justifyContent: 'space-around',
},
midContainer: {
flexDirection:"row",
width:'100%',
flex: 1,
backgroundColor: '#aff',
alignItems: 'center',
justifyContent: 'center',
},
bottomContainer: {
flexDirection:"row",
width:'100%',
flex: 1,
backgroundColor: '#ada',
alignItems: 'center',
justifyContent: 'center',
},
textContainer: {
fontWeight:'bold',
fontSize:20,
}
});
결론,
- expo 너무 편합니다 ( react-native cli 대비)
- window 환경 에서도 ios 에 app 올려보려면 expo 밖에 없음..
반응형
'Mobile 개발 > RN(React Native)' 카테고리의 다른 글
RN TroubleShooting: react-native-vector-icons ios 적용 (0) | 2020.11.02 |
---|---|
RN Troubleshooting: xcode device is not available please reconnect the device (0) | 2020.11.02 |
스무디 한잔 마시며 끝내는 React Native - TodoList App (0) | 2020.08.03 |
스무디 한잔 마시며 끝내는 React Native - Counter App (0) | 2020.07.28 |
스무디 한잔 마시며 끝내는 React Native - 기본기 닦기 (0) | 2020.07.22 |