HybridApp-React Native 2세대 (Layout)

<최종화면> CustomComponent외의 참조변수, 메소드에 태그문을 넣어서 보여줄 수 있다.

---

작업 전에 AVD를 켜놓자.

이전 작업 때문에 현재 경로는 d:\HybridApp\ReactNative\RN06CustomComponent에 있다. 

모든 예제는 ReactNative폴더에 만들것이기 때문에 해당 경로로 가서 명령어를 입력하자.

RN07ListLayout을 만들자.

만든 폴더로 가서 run하자.

CustomComponent를 사용하지 않고도 태그문을 사용할 수 있다.

메소드를 이용해서 태그문을 사용할 수 있다.

파라미터를 이용해서 값을 전달할 수 있다.

태그문을 담고있는 객체를 배열에 담아서 사용 가능하다.

arr은 toString이 자동 호출되어서 배열이름을 사용하면 배열 요소들이 된다.

배열요소를 사용할때 key값을 주어야 경고창이 안생긴다.

배열에 문자열은 컴포넌트가 아니므로 바로 배열 이름만 사용하면 에러가 난다. 예) {datas}  이러면 에러

---

<복붙용 코드>

MainComponent.js

import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
 
export default class MainComponent extends Component{
 
    render(){
 
        // 지역변수 : 태그문 문자열을 저장한 것이 아니라 Text컴포넌트 저장
        const aaa=<Text>Nice</Text>;
        const bbb= <View style={{marginTop:16}}>
                        <Text>Hello React Native</Text>
                        <Button title="button"></Button>
                    </View>;
 
        //배열 변수
        const arr= [aaa,bbb,bbb];
 
        // 원래 배열을 출력하면 각 요소를 구별하는 key속성이 없으면 경고
        const arr2=[
            <View keky="aa">{aaa}</View>,
            <View keky="bb">{bbb}</View>,
            <View keky="cc">{bbb}</View>,
        ];
 
        // 실제 앱에서는 배열에 저장된 대량의 데이터가 컴포넌트가 아니라 
        // 데이터들일 것임. 예) 공공API 파싱
        let datas= ["aaa","bbb","ccc"];
 
        return(
            <View style={style.root}>
            <Text style={style.title}>List Layout Test</Text>
                {aaa}
                {bbb}
 
                {/* 메소드 호출 */}
                {this.showItemView()}
                {this.showItemView2("sam","press","indigo")}
 
                {/* 배열에 저장된 컴포넌트들 출력 */}
                {arr2}
                {/* 이전에는 배열의 요소들을 구분하는 식별자 key 속성이 없다고 경고표시됨 */}
 
                {/* 데이터는 컴포넌트가 아니므로 직접 출력 불가 */}
                {/* 데이터(string)의 개수만큼 <Text>를 만들고 그 안에 데이터를 출력 */}
                {/* 배열 객체의 map()메소드 : 배열요소개수만큼 반복하면서 요소값 제어후 새로운 배열을 리턴 */}
                {
                    datas.map(function(value, index,array){
                        return(
                            <View key={index} style={{margin:16,}}>
                                <Text>{value}</Text>
                            </View>
                        );
                    })
                }
                
 
            </View>
        );
    }//render method..
     // 메소드
     showItemView(){
            return (
                <View style={{marginTop:16,}}>
                    <Text>Nice world</Text>
                    <Button title="click me" color="orange"></Button>
                </View>
            );
    }
 
    showItemView2(name, title, color){
        return (
            <View style={{marginTop:16,}}>
                <Text>Nice {name}</Text>
                <Button title={title} color={color}></Button>
            </View>
        );
}
}//MainComponent class..
 
const style= StyleSheet.create({
    root: {flex:1, padding:16,},
    title:{fontSize:24, fontWeight:'bold'},
});

index.js

/**
 * @format
 */
 
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import MainComponent from './MainComponent';
 
AppRegistry.registerComponent(appName, () => MainComponent);