전체 영역을 차지하고 있음을 확인했다면 backgroundColor 속성은 지워주세요.
다음으로 components 디렉터리에 Counter.js 파일을 생성해 다음과 같이 코드를 작성해주세요.
components/Counter.js
import React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
function () {
return (
<View style={styles.wrapper}>
<View style={styles.numberArea}>
<Text style={styles.number}>0</Text>
</View>
<Button title="+1" />
<Button title="-1" />
</View>
);
}
const styles StyleSheet.({
wrapper: {
flex: 1,
},
numberArea: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
number: {
fontSize: 72,
fontWeight: 'bold',
},
});
export default Counter;