리액트 네이티브 규칙

•    1. HTML이 아니기에 div 사용 못함 => 대신에 View를 사용 View는 container 항상 import 해야함

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

•    2. text는 text component에 들어가야함 => p, span, div,h1,h2,h3 사용X

 

•    3. View에는 style이 있음. // StyleSheet.create << 자동완성을 제공함. 유용해서 선호함
•    4. 일부 component는 IOS 및 Android 운영 체제와 소통하기 위함 // StatusBar

<View style={styles.container}>
   <Text>Hello</Text>
   <StatusBar style="auto"/>
</View>

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: "#fff",
},
text:{
fontSize:28,
}
})

 

•     5. 리액트 css 기본설정은 row(가로),  네이티브는  Column(세로)
•     6. 기존 display:flex;하고  flex-direction 넘어가야 함 , 네이티브 Container View 는 이미 Flex Container 그러므로 가로 설정은 flexDirection: "row"
•    7. 핸드폰 기종마다 크기가 다 다르기에 반응형으로 만듬 => width, height 는 거의 사용하지 않음
•    8. 가운데 정렬    justifyContent: "center",   alignItems: "center",

•    9. 스크롤은 View이기에 자동적으로 안됨 import
• import { ScrollView } from 'react-native';
• horizontal << 가로 스크롤
• contentContainerStyle << 스크롤하면 스타일은 이걸로 변경
•    10. 핸드폰 width, height 알고싶으면 import => 이걸 활용해서 문구를 가운데 둘 수 있음 ( 가로 스크롤시)
• import { Dimensions,} from 'react-native';

const {width: SCREEN_WIDTH} = Dimensions.get("window")

 

day: {

    width:SCREEN_WIDTH,

    alignItems: "center",

  },

   11. (가로)페이지 넘김 자연스럽게 => pagingEnabled

   12. (가로)스크롤바 숨김 => showsHorizontalScrollIndicator={"flase"}

   13. (가로)스크롤바 색 변경(아이폰) => indicatorStyle="white"

   14. 터치이벤트 => TouchableOpacity

   15. 비밀번호 텍스트입력 => secureTextEntry

   16. 멀티라인( default값=싱글라인) => multLine

   17. onChange => onChangeText

   18. 인풋값이 뭔지 => onSubmitEditing