React-native 설치 및 props와 state(1)

기본설치 - expo CLI

1. node 설치
2. npm install -g expo-cli
3. cd expoTest
4. npm start
   
   위와 같이 Starting Metro Bundler만 나올 경우 오류 해결법

• 해당 port kill을 한다.

netstat -a -o
taskkill /f /pid PID번호

• expo-cli start --tunnel
  

설치 프로그램

1. android studio
2. xcode

애뮬레이터를 켜고, expo와 연동시켜준다.
실제 앱에서 expo를 설치
왠만하면 애뮬레이터보다 실제 폰에서 테스트를 하면서 프로젝트를 진행하는 것이 나중에 배포했을 때 오류가 적다.

• 실제 기계 연동
  https://romeoh.tistory.com/entry/Expo-iOSAndroid-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%A1%9C-build-%ED%95%98%EA%B8%B0

기본설치 - ReactNative CLI

1. npm install -g react-native-cli
2. react-native init nativeTest
3. cd nativeTest
4. react-native run-ios
5. react-native run-android

Hello World

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

이미지 넣기

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
      <Image
        source={require('./assets/3_s.png')}
        style={{width: 200, height: 300}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

type값에 따라서 이미지 변경

class Test extends Component {
  render(){
    let testImage = '';
    if(this.props.type==='one'){
      testImage = require('./assets/3_s.png');
    }else((this.props.type==='two'){
      testImage = require('./assets/2_s.png');
    }
    return (
      <View>
        <Image
          source={testImage}
          style={{width: 200, height: 300}}
        />
      </View>
    );
  }
}

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
      <Test type='one'/>
      <Test type='two'/>
    </View>
  );
};