Younho9 Noteskawai-todo 따라 만들기
Title
kawai-todo 따라 만들기
Category
React NativeTags
Aliases
kawai-todo 따라 만들기Created
4 years ago
Updated
last year
Dimensions API
javascript
import {Dimensions} from 'react-native';
import {Dimensions} from 'react-native';
javascript
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
or;
const {height, width} = Dimensions.get('window');
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
or;
const {height, width} = Dimensions.get('window');
사용하는 핸드폰(윈도우 객체)의 가로 너비, 세로 너비를 구할 수 있다.
Platform Specific Code
Platform Specific Code · React Native
javascript
import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100,
});
import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100,
});
javascript
import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});
import {Platform, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});
Shadow Props
javascript
...Platform.select({
ios: {
shadowColor: "rgb(50, 50, 50)",
shadowOpacity: 0.5,
shadowRadius: 5,
shadowOffset: {
height: -1,
width: 0
}
},
android: {
elevation: 3
}
})
...Platform.select({
ios: {
shadowColor: "rgb(50, 50, 50)",
shadowOpacity: 0.5,
shadowRadius: 5,
shadowOffset: {
height: -1,
width: 0
}
},
android: {
elevation: 3
}
})
shadow 는 iOS와 Android에서 속성이 다르다. Android는 elevation 으로 사용한다 .
ScrollView
스크롤뷰 컴포넌트 안에 ToDo 컴포넌트를 넣는다.
javascript
<ScrollView>
<ToDo />
</ScrollView>
<ScrollView>
<ToDo />
</ScrollView>
TextInput
placeholderTextColor: 플레이스홀더 텍스트 색깔onChangeText: 텍스트가 바뀌면 실행될 콜백함수autoCorrect: 텍스트 자동수정 (false로 하는게 편할 듯)returnKeyType: 키보드 레이아웃에서 표시될 문구
javascript
<TextInput returnKeyType={'done'} />
<TextInput returnKeyType={'done'} />
setState
함수형 setState가 리액트(React)의 미래이다(Functional setState is the future of React)
javascript
_toggleComplete = () => {
this.setState((prevState) => {
return {
isCompleted: !prevState.isCompleted,
};
});
};
_toggleComplete = () => {
this.setState((prevState) => {
return {
isCompleted: !prevState.isCompleted,
};
});
};
📌
setState에 updater 함수를 넣는 것이 이해되지 않음.
setState함수의 파라미터로 함수를 넣는 것이 어떤 의미인가?setState함수로 전달되는 함수의 파라미터는 어디서 받아오는 것인가?