[ React-Native ] React 다른점

@ 궁금한 이유

개발을 하면서 React 에서 사용했던 컴포넌트들이 사용되지 않는 경우를 많이 보았다. 그래서 한번 좀 천천히 정리 하고 싶다는 생각에 작성 하게 되었다.

 

---

@ 공부

 

## 비슷한 점

 

## 다른 점

# Style

1. Css와 굉장히 비슷하지만  camelCase (카멜) 표기법을 사용한다. ( 아닌 경우도 있다. justifyContent: 'space-between', )

 

2. react Css 에서 사용하는 것들이 React- native 에서 누락 되는 경우가 많다.

 

# Routing & Navigation

Navigation 에는 2가지 유명한 것들이 있다.

• React-navigation : js기반, navigation의 ui를 view와 애니메이션으로 직접 구현
• React-native-navigation : 네이티브 기반, os에서 제공하는 navigation관련 네이티브 컴포넌트를 사용

글쓴이는  React-native-navigation 을 선호 한다고 한다.

 

 React Native  플랫폼에 따라 다르게 제공해 줄수 있다. 뒤에 ios, android 만 붙여 주면 개발 가능하다.

<View
    style={[
    Platform.select({
        ios: styles.filterSwitchIOS,
        android: styles.filterSwitchAndroid,
    })
]}
>

 

# onPress

onPress={(e) => {
	e.stopPropagation();
	onPressScooter(scooter)
}}>

event 처리를 할때 또는 값을 넣을때 이런식으로 ()=>{} 함수 표시를 onPress  안에 넣어 줘야 한다.

 

---

@ 참고

https://www.robertcooper.me/comparing-react-to-react-native

 

https://jsdev.kr/t/react-native-1-navigation/2617

 

@ 코드 저장

import React,{useState} from 'react';

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



export default function App() {

  const[state,setState] = useState({

    t:''

  });

  const onChange = (text) =>{

    console.log(text);

    setState({text});

  }



    return (

      <View style={{padding: 10}}>

        <TextInput

          name="id"

          style={{height: 40}}

          placeholder="Type here to translate!"

          onChangeText={onChange}

        />

        <Text>{state.text}</Text>

      </View>

    );

}