리액트 네이티브 View / Text / justifyContent 값 종류 / alignItems 값 종류 / 축 가로 세로 구분 / 초기 화면 오류 / 이미지 넣기(Image source)

 

https://doorbw.tistory.com/145?category=700613

공부 중

 

div등과 같은 컴포넌트가 존재하지 않고, 특별하게 View, Text 와 같은 컴포넌트 사용

react native에서 사용할 수 있는 컴포넌트들이 한정적 

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 *

 * @format

 * @flow strict-local

 */

 

import React from 'react';

import { 

  SafeAreaView, 

  StyleSheet, 

  ScrollView, 

  View, 

  Text, 

  StatusBar 

} from 'react-native';

 

 

//const App: () => React$Node = () => {

export default class App extends React.Component {

  render(){

    return (

      <View style={styles.container}>

        <Text style={styles.topic}>Native Study</Text>

        <View style={styles.redBox}>

          <View style={styles.whiteBox}/>

          <View style={styles.yellowBox}/>

        </View>

        <View style={styles.blackBox}/>

      </View>

    );

  }

};

 

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'stretch', //기본 축과 직교되는 위치에 대해 설정하는 속성

    justifyContent: 'center', //내부에 있는 컴포넌트들의 기본 축을 중심으로 위치를 잡아주는 것

    margin: 25,

  },

  topic: {

    flex: 1,

    fontSize: 30,

    textAlignVertical: 'center',

    textAlign: 'center',

    fontWeight: '100',

  },

  redBox: {

    backgroundColor: 'red',

    flex: 6,

    flexDirection: 'row', //가로배치 (기본: 세로배치)

  },

  blackBox: {

    backgroundColor: 'black',

    flex: 1,

  },

  whiteBox: {

    backgroundColor: 'white',

    flex: 1,

  },

  yellowBox: {

    backgroundColor: 'yellow',

    flex: 1,

  },

});

 

// export default App;

 

 

https://doorbw.tistory.com/159?category=700613

만든다,, 인스타그램…!!!!

npm install native-base

npm install react-navigation 

이렇게 구체적으로 설치하면 라이브러리 설치

라이브러리 설치 완료 후에는 

npm install 

쳐서 dependency 추가 해야함 

connect 잃어버리면 react-native run-android

*캐시삭제 react-native start --reset-cache

 

export default class App extends React.Component {

  render(){

    return (

      <AppStackNavigator />

    );

  }

}

// StackNavigator 를 App에 추가하기

const AppStackNavigator = createStackNavigator({

  Main:{

    screen: MainScreen,

  },

});

-

전체 빨간줄 

vscode 전역설정 json 파일에 아래 내용 추가하시면 소스 저장시 eslint 오류가 자동으로 fix 됩니다. "editor.codeActionsOnSave": {  "source.fixAll.eslint": true }

/* eslint-disable prettier/prettier */

 

이거를 쓰면 빨간줄이 없어지긴 하는데 화면은 계속 빨갛다…

 

npm react-native-vector-icons

npm react-native link react-native-vector-icons

npm react-native-elements --save

하면 또 다르게 빨개진다,, 

-

그래서 다시 원점…

https://reactnative.dev/docs/tutorial

만든 회사 튜토리얼 따라하기..ㅠㅠ

 

/* eslint-disable quotes */

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 *

 * @format

 * @flow strict-local

 */

 

import React, {Component} from 'react';

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

 

class App extends Component {

  state = {

    count: 0,

  };

  onPress = () => {

    this.setState({

      count: this.state.count + 1,

    });

  };

  render() {

    return (

      <View style={styles.body}>

        <TouchableOpacity style={styles.button} onPress={this.onPress}>

          <Text> Click me </Text>

        </TouchableOpacity>

        <View>

          <Text>You clicked {this.state.count} times</Text>

        </View>

      </View>

    );

  }

}

 

const styles = StyleSheet.create({

  body: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  button: {

    alignItems: 'center',

    backgroundColor: '#DDDDDD',

    padding: 10,

    marginBottom: 10,

  },

});

 

export default App;

 

 

클릭하면 state 오르는 앱을 만들었다.

리액트랑 얼추 비슷한듯. 근데 touchableOpacity는 무엇..??

누를 때 래핑 된 뷰의 불투명도가 감소하여 흐리게 표시되는 것. 

사용하는 이유? Button 컴포넌트는 안드로이드와 ios에서 다르게 보이기 때문에 관리하는데에 어려움이 있기 때문. 

 

<Image

          source={{uri: 'https://cdn2.iconfinder.com/data/icons/cat-power/256/cat_tied.png'}}

          style={{width: 100, height: 100}}

        />

 

이미지도 넣었다! 이미지 그냥 링크 주소로 넣을 수가 있다..!