traders_free custom_top_html:no
default debug random = 0 / type = READ / detected = READ

안녕하세요.

쌩광부입니다.

 

아래 도표는 우리가 만들어야될 각각의 스크린을 표시했는데요.

 

Navigation.png

 

Welcome - 시작화면

MyWallet - 내 지갑

AddWallet - 지갑 생성하기

ImportWallet - 지갑 불러오기

WalletDetail - 지갑 상세보기

Transactions - 거래내역 보기

SendCoin/Token - 코인/토큰 보내기

그냥 제목만 봐도 각각의 화면이 어떤 역할을 하는지 아시겠죠?

 

#3. Navigation 완성하기

 

그럼 이번 강좌에서는 각각의 화면을 만들고 네비게이션으로 연결하는 방법을 알려드립니다.

먼저 추가로 필요한 패키지를 설치합니다.

 

C:\Users\YOUR_USERNAME\topwallet> npm install react-native-actionsheet --save

 

ActionSheet는 iOS에서 자주볼 수 있는 팝업 메뉴인데요.

원래 RN에서는 ActionSheetIOS를 기본적으로 지원하지만 문제는 Android에서는 사용할 수가 없어요.

그렇기 때문에 별도의 Android, iOS 공용 패키지인 react-native-actionsheet를 이용하지요.

react-native-actionsheet 패키지에 대한 자세한 설명은 아래 링크를 참고하세요.

https://github.com/beefe/react-native-actionsheet

 

자 이제 본격적으로 코딩을 해볼까요?

 

우선 아래와 같은 소스 파일들을 ./src/screen 폴더에 생성하세요.

mywallet.js, addwallet.js, importwallet.js, welletdetail.js, transactions.js, sendcoin.js, icon-button.js

 

맨 마지막에 icon-button.js 파일은 Icon 형태의 버튼을 표시하기 위해 필요합니다.

 

mywallet.js 파일을 아래와 같이 코딩합니다.

 

import React, { Component } from 'react';

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

import ActionSheet from 'react-native-actionsheet'

import { IconButton } from './icon-button';

 

class MyWalletScreen extends Component {

  static navigationOptions =({navigation}) => ({

    title: '내 지갑',

    headerRight: (

      <View style={{marginRight: 5}}>

      <IconButton onPress={() => navigation.getParam('showMenu')() } 

source={require('../img/ico-menu.png')} />

      </View>

    )

  });

 

  componentWillMount() {

    this.props.navigation.setParams({showMenu: () => this.ActionSheet.show()});

  }

 

  render() {

    return (

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

        <Text style={{marginBottom: 10}}>내 지갑 화면</Text>

        <Button onPress={() => this.props.navigation.navigate('WalletDetail')} 

title="지갑 상세보기"/>

        <View style={{marginBottom: 10}}/>

    <Button onPress={() => this.props.navigation.navigate('Transactions')} 

title="거래내역 보기"/>

        <ActionSheet

          ref={o => this.ActionSheet = o}

          title={'메뉴를 선택하세요.'}

          options={['지갑 생성하기', '지갑 불러오기', '취소']}

          cancelButtonIndex={2}

          destructiveButtonIndex={99}

          onPress={(index) => {

            if(index == 0) this.props.navigation.navigate('AddWallet');

            else if(index == 1) this.props.navigation.navigate('ImportWallet');

          }}

        />

      </View>

    );

  }

}

 

export default MyWalletScreen;

 

한줄 한줄 설명하겠습니다.

 

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

필요한 UI Component 패키지들을 불러옵니다.

 

import ActionSheet from 'react-native-actionsheet'

ActionSheet를 사용하기 위해 불러오기를 했습니다.

 

import { IconButton } from './icon-button';

아이콘 버튼을 표시하기 위해 불러오기를 했는데요. 좀 뒤에 코딩합니다.

 

여기서 잠깐!

위에 2개의 import를 보시면 from 뒤에 ./가 있는게 있고 없는게 있고 그렇죠?

./가 있다는 것은 현재 내 소스 파일이 있는 폴더에서 지정된 파일을 찾는다는 얘기고요.

./가 없다면 미리 등록된 패키지들 중에서 찾아옵니다.

물론 같은 폴더의 있는 파일들을 불러올때는 ./를 사용하지 않아도 됩니다.

그러나 ./를 지정함으로써 명확하게 이 파일은 내 소스에서 있다고 명시해줘야 차후 설치된 패키지들과의 충돌을 막을 수 있습니다.

 

title: '내 지갑'

이 화면의 이름을 '내 지갑'이라고 출력합니다.

 

headerRight: (

  <View style={{marginRight: 5}}>

  <IconButton onPress={() => navigation.getParam('showMenu')() } source={require('../img/ico-menu.png')} />

  </View>

)

화면 네비게이션바에 우측(headerRight)에 메뉴 버튼을 만듭니다.

그리고 onPress 프로퍼티에 버튼이 눌렸을때 호출할 명령을 작성합니다.

source 프로퍼티에는 메뉴 아이콘을 넣습니다.

아이콘은 아래에서 불러와서 ./src/img 폴더에 넣습니다.

https://github.com/topmining/topwallet/blob/master/src/img/ico-menu.png

 

여기서 잠깐!

지난 강좌에서 설명했듯이 < >안에 표시되는 것들은 Component를 라고 하고요.

그 다음 style, onPress, source 들을 우리는 프로퍼티(속성)라고 부릅니다.

그리고 이런 것들을 총칭해서 props라고 합니다.

앞으로의 소스에 보시면 props 라는 표현을 많이 사용하게 되는데요.

전부 프로퍼티(속성)를 의미합니다.

이런 props는 해당 Component의 고유 속성이라고 보시면 되겠습니다.

결론적으로 props를 어떻게 설정하고 어떻게 변경하느냐에 따라서 모양이 바뀌거나 프로그램의 흐름이 변경되거나 하겠죠. ^^

 

onPress={() => navigation.getParam('showMenu')() }

Component가 눌렸을때 navigation.getParam을 호출해서 showMenu를 불러와서 호출한다는 의미인데요. 어렵죠?

react-navigation을 사용할 경우 Navigation에서 우리가 만드는 Screen의 특정 함수를 직접 호출할 수 없기 때문에 우리가 만든 함수를 Navigation의 params로 연결하고 Navigation은 params를 다시 불러서 함수를 호출합니다. 복잡한 과정이지만 또 지금은 이해가 잘 안가시겠지만.

그냥 그렇구나 하고 그대로 코딩하시면 되겠습니다.

 

componentWillMount()

Component가 화면에 그려지기 직전에 호출되는 함수입니다. 

 

this.props.navigation.setParams({showMenu: () => this.ActionSheet.show()});

이 Component의 props에서 navigation을 불러오고 거기에 showMenu 속성에 이 Component의 ActionSheet.show 함수를 지정합니다. 이건 또 뭔소리?

하나 하나 살펴보면

this 이건 지금 실행되고 있는 이 Component 자신을 의미합니다.

props 이건 위쪽에 설명했던 고유속성을 말하는 거고요.

navigation 이건 저희가 react-navigation을 사용하는데요. 그런 경우 각각의 Screen으로 만든 Component들은 props에 navigation 속성이 추가됩니다.

즉, navigation과 데이터를 주고 받기 위해서는 이 속성이 꼭 필요하겠죠.

더 궁금하셔도 그냥 코딩하세요. 위와 같은 표현은 지속적으로 나오기 때문에 그냥 그렇게 해야되는구나 생각하시면 됩니다.

물론 다른 방법도 있겠지만 저희는 초보니까요. ^^

 

render() 함수에서는 간략하게 이 화면이 '내 지갑 화면'이라는 것을 출력하고요.

 

<Button onPress={() => this.props.navigation.navigate('WalletDetail')} title="지갑 상세보기"/>

지갑 상세보기 화면으로 이동하기 위한 버튼입니다.

 

<Button onPress={() => this.props.navigation.navigate('Transactions')} title="거래내역 보기"/>

거래내역 보기 화면으로 이동하기 위한 버튼입니다.

 

<ActionSheet

  ref={o => this.ActionSheet = o}

  title={'메뉴를 선택하세요.'}

  options={['지갑 생성하기', '지갑 불러오기', '취소']}

  cancelButtonIndex={2}

  destructiveButtonIndex={99}

  onPress={(index) => {

if(index == 0) this.props.navigation.navigate('AddWallet');

else if(index == 1) this.props.navigation.navigate('ImportWallet');

  }}

/>

 

ActionSheet를 화면에 표시하기위한 코딩입니다.

지갑 생성하기, 지갑 불러오기 메뉴를 표시하고 각각을 클릭했을때 각각의 화면으로 이동하는 코딩이 되어있습니다.

나중에 실행해 보시면 아! 이런거구나 알게됩니다.

onPress에는 버튼이 눌렸을때 각각 어느 화면으로 이동하는지를 설정합니다.

 

this.props.navigation.navigate('AddWallet')

AddWallet 화면으로 이동하라는 명령입니다.

위와 같이 this.props.navigation.navigate 함수를 호출하면 간단하게 다른 화면으로 이동할 수 있습니다.

 

icon-button.js 파일은 아래와 같이 코딩합니다.

 

import React from 'react';

import { StyleSheet, TouchableHighlight, Image } from 'react-native';

 

export const IconButton = ({ source, onPress, style }) => (

    <TouchableHighlight style={[styles.container, style]} onPress={onPress}

        underlayColor="#d0d0d0">

        <Image style={styles.image} source={source} />

    </TouchableHighlight>

);

 

const styles = StyleSheet.create({

  container: {

    width: 42,

    height: 42,

    alignItems: 'center',

    justifyContent: 'center',

    borderRadius: 21

  },

  image: {

    width: 32,

    height: 32

  }

});

 

react-native에 기본적인 아이콘 버튼이 없기 때문에 별도로 Component를 제작했습니다.

 

const styles = StyleSheet.create

이곳을 보시면 버튼의 모양을 정의하는 내용이 포함됩니다.

style에 대한 내용은 차후에 다시 설명하도록 하겠습니다.

 

addwallet.js, importwallet.js, welletdetail.js, transactions.js, sendcoin.js 파일의 소스는 깃허브에서 확인하시고 그대로 코딩하시면 됩니다.

https://github.com/topmining/topwallet/tree/master/src/screen

 

여기까지해서 각각의 페이지들을 만들어봤는데요.

이 상태로 실행해봤자 맨 첫 'MyWallet(내 지갑)' 페이지를 연결해주지 않았기 때문에 재대로 실행되지 않겠죠.

 

기존에 만들었던 App.js 파일을 열어 아래와 같이 수정합니다.

 

import React from 'react';

import { createStackNavigator } from 'react-navigation';

 

import WelcomeScreen from './src/screen/welcome';

import MyWalletScreen from './src/screen/mywallet';

import AddWalletScreen from './src/screen/addwallet';

import ImportWalletScreen from './src/screen/importwallet';

import WalletDetailScreen from './src/screen/welletdetail';

import TransactionsScreen from './src/screen/transactions';

import SendCoinScreen from './src/screen/sendcoin';

 

const App = createStackNavigator({

  Welcome: { screen: WelcomeScreen },

  MyWallet: { screen: MyWalletScreen },

  AddWallet: { screen: AddWalletScreen },

  ImportWallet: { screen: ImportWalletScreen },

  WalletDetail: { screen: WalletDetailScreen },

  Transactions: { screen: TransactionsScreen },

  SendCoin: { screen: SendCoinScreen },

},

{

  initialRouteName: "Welcome",

  cardStyle: { backgroundColor: '#FFFFFF' },

});

 

export default App;

 

빨강색으로 표시된 부분이 추가된 부분인데요.

Navigation에 각각의 페이지를 등록해줘야 합니다.

 

이제 ./src/screen 폴더에 있는 welcome.js 파일을 열어 아래와 같이 수정합니다.

  

import React, { Component } from 'react';

import { View, Image } from 'react-native';

import { StackActions, NavigationActions } from 'react-navigation';

 

class WelcomeScreen extends Component {

  static navigationOptions =({navigation}) => ({

    title: "",

    headerTransparent: true

  });

 

  componentDidMount() {

    setTimeout(() => this.gotoMyWallet(), 1000);

  }

 

  gotoMyWallet() {

    const resetAction = StackActions.reset({

      index: 0,

      actions: [NavigationActions.navigate({ routeName: 'MyWallet' })],

    });

    this.props.navigation.dispatch(resetAction);

  }

 

  render() {

    return (

      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>

        <Image source={require('../img/ico-esn.png')} />

      </View>

    );

  }

}

 

export default WelcomeScreen;

 

마찬 가지로 빨강색으로 표시된 부분이 추가된 부분인데요.

 

componentDidMount()

Component가 화면에 그려진 이후 호출되는 함수인데요.

 

여기서 잠깐!

위에 설명했던 componentWillMount와 componentDidMount는 어떤 차이가 있을까요.

둘다 화면이 그려질때 호출되는 함수인데요.

componentWillMount은 화면이 그려지기 이전에 호출됩니다. 

componentDidMount은 화면이 그려진 이후에 호출됩니다.

 

setTimeout(() => this.gotoMyWallet(), 1000);

1000ms(1초) 뒤에 gotoMyWallet 함수를 호출합니다.

 

gotoMyWallet() {

  const resetAction = StackActions.reset({

    index: 0,

    actions: [NavigationActions.navigate({ routeName: 'MyWallet' })],

  });

  this.props.navigation.dispatch(resetAction);

}

원래 this.props.navigation.navigate 함수를 호출해 다른 화면으로 이동한다고 설명했는데요.

여기서는 this.props.navigation.dispatch 함수를 이용해 이제 다시 뒤로 돌아올 필요가 없다고 지정하는 것입니다.

StackActions.reset을 이용해 Navigation 흐름을 삭제하고 MyWallet으로 이동합니다.

즉, WelcomeScreen은 다시 되돌아갈 이유가 없기 때문이죠.

 

만약 

gotoMyWallet() {

  this.props.navigation.navigate('MyWallet');

}

으로 코딩하고 실행하면 어떤 상황이 발생되는지는 직접 확인해보시면 좋겠네요.

 

이제 가상 머신을 뛰우고 실행을 해보겠습니다.

 

C:\Users\YOUR_USERNAME\topwallet> react-native run-android

 

버튼들을 하나씩 클릭해 보시면 아래와 같은 화면들을 볼 수 있습니다.

 

AllScreen.png

 

각 화면들에는 뒤로가기 버튼에 대한 어떠한 코딩도 없는데 희한하게 잘 작동합니다.

바로 react-navigation을 이용했기 때문에 기본적으로 뒤로가기 기능이 작동되는 것이지요.

언밀하게 저희는 StackNavigation기능을 이용한 것인데요.

그외에도 몇 가지 Navigation기능이 더 있습니다. 물론 저희는 이것으로 충분하지요. ^^

 

Tip. 가상 머신에서 RN 디버깅 단축키

가상 머신 실행창에서 Ctrl+M 버튼을 누르면 다양한 옵션을 사용 할 수 있는데요.

그중에 Enable Live Reload, Enable Hot Reloading 기능을 활성화하면 소스 파일이 저장 될때마다 자동으로 빌드되어 실행됩니다.

실제 개발시에는 이것을 활성화하고 코딩을 하면 매우 편리하겠죠.

만약 소스 코드에 오류가 있으면 빨간 배경의 오류창을 볼 수 있기 때문에 바로 바로 소스를 수정 할 수 있겠죠.  ^^

 

오늘 강좌는 여기까지입니다.

이전 강좌를 보고 싶으시면 제 블로그를 방문해주세요.

https://www.ddengle.com/@TopMining

좋아요 많이 부탁합니다.


[알림: 이 게시글은 관리자에 의해 ''에서 '트레이더스'로 이동되었습니다]
27,934
댓글 16

List of Articles
번호 제목 추천 수 조회 수 글쓴이 날짜
공지 땡글 경매! 레고 슈퍼마리오 스타터팩(~10/25) 2 file 10 726
ESN경매
2020.10.19
공지 9월 출석체크 이벤트 ESN 지급 안내 3 12 1969
ESN경매
2020.10.14
공지 땡글닷컴 출석체크 이벤트(10월) 52 16 4528
ESN경매
2020.10.05
공지 ESN 9월 리포트 1 file 8 3561
ESN운영
2020.09.29
공지 ESN 바운티 프로그램 안내 - 스마트 컨트랙트 투표 시스템 구축 및 투표 결과 통계 정보 제공 2 16 1780
ESN운영
2020.09.07
공지 게시판 캐시 적립 정책 변경 안내 (2019/12/20 시행) 55 20 2070
관리자
2019.12.20
공지 로그인이 안되시는 분은 문의해주시기 바랍니다. 13 7 4761
땡글개발자
2019.08.21
17186 비트 급락의 역사   누가 만들었는지 모르고 예전에 땡글 어느 분이 올려주셨을수도 있는 그림인데요.. 지금껏 비트가 급락한 이력을 정리한 것입니다 1년전 여름쯤에 우지한이가 비트에 대해 쿠테타를 일으켜 30여% 급락했었고 망무... 34 file 31 4549
INT
2018.11.19
17185 [카툰] 이제 그만     [알림: 이 게시글은 관리자에 의해 ''에서 '트레이더스'로 이동되었습니다] 22 file 22 1885
고독한코인가
2018.11.19
17184 암호화폐는 사라질 것인가~?   결론부터 정리하면...   암호화폐는 미래에도 살아남아 있을 것입니다...       다들~~   비트코인의 탄생과 발전 과정에 대해... 익히 아실것입니다.   특히나... 탈중앙화~라는 기치는 거의 종교적인 수준의 추앙... 42 16 2613
율리우스
2018.11.19
17183 비캐 하드포크 대전은 언제 끝나나요? 우지한, 로저버 이 사람들도 싫어하지만, 지들 이익을 위해 펌핑도 하고 그러는데 (물론 비캐를 산적이 없어서 수혜를 받은적은 없지만.)   크레이그 이 짭토시라 불리우는 사람은 지 뜻대로 안되면 다 죽어라 하는 ... 1 1 826
디엠스토리
2018.11.19
17182 [18.11.19] 스위스에서 첫 ETF 상품 출시! 카카오 클레이튼 3억달러 투자 유치! 다양한 소식들!   하양이아빠입니다.   ☆ 오늘의 Pick 뉴스 암호화폐 ETF, 미국 아닌 스위스에서 ‘태동’ https://www.blockmedia.co.kr/archives/53354   오늘의 픽은 이 뉴스 입니다.   뉴스 내용을 간략히 요약해보면 이렇습니다.... 4 file 5 656
하양이아빠
2018.11.19
17181 이양반은 왜 혼자 거꾸로 가나요 ??? @,.@   이양반은 왜 혼자 거꾸로 가나요 ??? @,.@ 뭔가 냄새가 ㅡ,.ㅡ                   ------------------------------------- 꼬리말 * 게시글 내용 삭제시 레벨 강등 * 질문은 각 주제별 게시판에 적어주세요.   비트... 9 file 0 1509
팔복동최씨
2018.11.19
17180 이번 폭락은 비캐 하드포크 난 때문   지난 주말 부터 비캐의 하드포크로 위태위태하던 시장이 하락충격이 온것입니다.  비캐가 abc sv로 갈라지면서 죽자사자로 해시전쟁을 하는것 하락 방아쇠를 당긴것입니다. 일단 우지한과 짭토시를 잡으러 가고 싶... 5 file 2 2010
doss
2018.11.19
17179 코인의 미래가 있을까요? 없습니다. 미래가 없다라고 단정짓게 된 이유 4가지 입니다.    1. 코인의 절대량(일종의 총통화)이 줄기는 커녕, 계속 늘고 있다. - 뭐든지 발행량이 많으면 가치는 떨어진다. 모든 코인들이 하나의 코인으로 통합이 되어도 모... 67 14 2643
여수
2018.11.19
17178 비캐와 비캐SV     둘이 싸우는데 끼기 싫어서 에어드랍 받자마자 bsv-15만5천 bch-38만 정도에서 다 팔아버렸는데... 트레이드 하면서 제일 잘한일이었네;;;                   ------------------------------------- 꼬리말 * 게... 4 1 1227
비트프레드릭
2018.11.19
17177 급부상하고 있는 XRP스탠다드에 대한 생각 이들의 광대놀음에 염증이 난  상당수 시장 참여자들은 사토시 나카모토가 고안한 컨센서스룰, POW에 대해 회의를 가지기 시작하는 듯 합니다. 이와 동시에 XRP 스탠다드에 대한 논쟁이 뜨겁게 트위터를 달구고 있습... 25 file 16 2077
굿터치
2018.11.19
17176 스위스 Crypto ETF 출시 (세계 최초)       예전에 캐나다 etf 뉴스도 봤었는데 아무튼 뉴스에는 World's first crypto ETF approved 라고 뜨니 있는그대로 세계 최초 라고 옮깁니다   유럽에서 4번째로 큰 증권시장인 스위스의 SIX 에서 비트코인을 포함... 7 file 7 914
풀트리
2018.11.19
17175 안좋은 시장 상황에서 그냥 한번 써보는 암호화폐의 발전가능성       현재 시장 상황이 많이 안좋습니다.   거의 올해 최저 인거같아요.   저는 개인적으로 이더리움 투자자인데 올해 초만해도 거의 240만원까지 올라갈때는   상반기 전에 천만원 찍고 하반기때 몇천만원 될줄 알... 10 15 1220
침팬치
2018.11.18
17174 [18.11.18] 비트코인캐시 하드포크 전쟁을 보며 쓰는 잡설! 다양한 소식들!     하양이아빠입니다.   ☆ 오늘의 Pick 뉴스 BCH 하드포크 관련 주요 거래소 현황 코인댄스 &quot;BCHABC, BCH로 표기&quot;   비트코인캐시 블록 진행상황 https://cash.coin.dance   =&gt; 이번주 비트코인캐시 해시 전쟁을 보... 20 file 11 1143
하양이아빠
2018.11.18
17173 ★☆★ 10만원으로 FREE코인 6개월 도전기 ★☆★    절대 코인 광고나 홍보가 아니며 마음에 들면 한번 따라해 보셔도 됩니다. ^^   1. 프리코인은 완전 먼지코인 수준이면서, 인정받는 사이트인지는 몰라도 walletinvestor에서 아주 긍정적 평가를 하고 있습니다.  ... 19 file 10 2080
Orabunny
2018.11.18
17172 ★Oracol Xor★ 관련 소식이 있어 전해드립니다.       Oracol Yes it is. Bitscreener.com is one of the sites we choose to promote a press release about Oracol Xor https://bitscreener.com/press-release   Bitscreener Press Release | BitScreener List o... 6 file 3 443
청록
2018.11.18
17171 내가 크레이그 라이트라면? 돈버는법...       혹은 우지한이나 로저버 라면?? 돈버는법 ... 쉽네요        1번 지점에서 sv 패배 하고 끝난줄 알았지요...  트위터 abc 의 승리에 샴패인 터트리고 난리 나구요    이때 sv 다 쓸어 모읍니다   이후에 해시 ... 9 file 4 878
풀트리
2018.11.18
17170 ★필독★ oracol xor 또다른 이벤트!!(2탄) 이전 모바일 이벤트 https://www.ddengle.com/traders_free/10252374   이전 오라콜 내용정리 https://blog.naver.com/shinkyojung/221397248110   모바일 지갑 이벤트를 마감 했습니다.   이벤트 참여 해주신 모든 ... 48 file 13 1099
청록
2018.11.18
[강좌] 쌩광부의 모바일 지갑 만들기 #3. Navigation 완성하기 안녕하세요. 쌩광부입니다.   아래 도표는 우리가 만들어야될 각각의 스크린을 표시했는데요.     Welcome - 시작화면 MyWallet - 내 지갑 AddWallet - 지갑 생성하기 ImportWallet - 지갑 불러오기 WalletDetail - ... 16 file 26 1544
쌩광부
2018.11.17
17168 삭제한 글입니다 삭제한 글입니다 0 221
아랑이
2018.11.17
17167 후오비 빅데이터 연구 보고서가 또 나왔네요 Huobi Blockchain Big Data Weekly Insights (Vol.22 2018/10/31–2018/11/7)   https://coinpost.jp/?p=56249   빅데이터 자료 분석해서 매주 발표하는 거지만 모르는 분도 계실거 같아 투자에 참고하시라 올립니다. ... 7 1 749
카네모치
2018.11.17
목록
Board Pagination Prev 1 ... 188 189 190 191 192 193 194 195 196 197 ... 1052 Next
/ 1052
default debug random = 0 / type = READ / detected = READ