React Native 공부 10 - 간단한 구현해보기

MyPage 화면을 구성하기 앞서 앞에 배운 내용을 토대로 텍스트 띄우기, 아이콘 띄우기 등 간단한 테스트 소스코드를 구현해 보았다..

import React, {Component} from 'react';

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

export default class TestMyPageScreen extends React.Component{

_onPressLink() {

Alert.alert("my 페이지로 넘어가랏!!!");

}

render(){

return(

<View>

<Text>

Hi This is test message.

</Text>

<Text>

I hope you'll get better on react-native

</Text>

</View>

);

}

}

다음과 같이 TestMyPageScreen.js 코드를 작성하였고, Hi This is test message. I hope you'll get better on react-native 텍스트 두 줄이 뜨는 코드이다.

다음으로, 화면 컨트롤 소스코드인 App.js에 

import TestMyPageScreen from "./screen/TestMyPageScreen";

//REMIND : AppNavigator

const testMyPageAppNavigator = createStackNavigator({

testmypage:{

screen: TestMyPageScreen

}

})

//탭 기능

const TabNavigator = createBottomTabNavigator({

Home: AppNavigator,

MyPage: MyPageAppNavigator,

testMyPage: testMyPageAppNavigator,

},

{

defaultNavigationOptions: ({ navigation }) => ({

tabBarIcon: ({ horizontal, tintColor }) => {

const { routeName } = navigation.state;

let iconName;

//icon setting

if (routeName === 'Home') {

iconName = 'ios-videocam';

} else if (routeName === 'MyPage') {

iconName = 'ios-construct';

} else if (routeName === 'testMyPage'){

iconName = 'ios-person';// iconName form = 'ios - [name]'

}

return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;

},

}),

tabBarOptions: {

activeTintColor: '#C0403D',

inactiveTintColor: 'gray',

},

}

);

와 같이 추가하여 보았다. 

처음 모바일 소프트웨어를 하는 분들을 위한 추가적인 설명을 덧붙이자면,

1. 현재 경로안의 screen 폴더 안에 TestMyPageScreen.js 파일이 있고 import 문을 통하여 해당 소스코드를 불러왔다.

2. testMyPageAppNavigator 로 네비게이터를 생성하였고, 이 네비게이터는 위에서 import한 TestMyPageScreen.js를 부를 수 있게 도와주는 역할이다.

3. 탭 네비게이터에 route명 testMyPage 은 testMyPageAppNavigator를 불러온다.

4. expo 에서 제공되는 무료 아이콘을 사용할 때는 'ios-[icon이름]' 과 같이 사용하면 된다.