React-Native 함수, 변수 사용

First.js

import React, {Component} from 'react';
import {StyleSheet,View, Text,TextInput, TouchableOpacity,Image, Alert} from 'react-native';

class First extends Component {
    state={
        count:0,
        value:'',
        text:'',
        img: require('./image/killerwhale.jpg')
      }
    render() {
        return (
            <View style={{flex:1}}>
                <View style={{width:'100%', height:'10%', alignItems: 'center'}}>{/*justifyContent는 세로로가운데정렬 */}
                    <View style={{flexDirection:'row'}}>
                        <View style={{marginTop:15,marginRight:10}}>
                            <Text>ㅊㅇ</Text>
                        </View>
                        <View>
                            <TextInput style={styles.input} onChangeText={(text) => this.setState({value:text})} keyboardType="number-pad"/>
                        </View>
                        <TouchableOpacity onPress={this.changeImage.bind(this)}>
                        <View style={{width:50,height:50,alignItems:'center',justifyContent:'center',marginLeft:10,backgroundColor:'red'}}>
                                <Text>검색</Text>
                        </View>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{width:'100%',height:'90%'}}>
                        <Image style={{width:'100%',height:'100%',resizeMode:'cover'}} source={this.state.img}/>
                    </View>
            </View>
        );
    }
    changeImage = function(){
        let count = this.state.value;
        switch(count){
            case '1':
                this.setState({img:require('./image/kakaotalk.png')});
                break;
            case '2':
                this.setState({img:require('./image/killerwhale.jpg')});
                break;
            default:
                this.search();
                this.state.count = 0;
                break;
        }
    }
    search = function(){
        let inpp = this.state.value;
        Alert.alert('오류',inpp+"장은 없습니다.");
    }
}

export default First;

const styles = StyleSheet.create({
    input:{
        width:200,
        borderColor:"#000000",
        borderWidth: 1
    }
});

위쪽부터 까먹을거 같은거 위주로 작성

state 내기준 쉽게 생각해서 전역변수같은 느낌으로 사용 미리적어놓으면 왠만한곳 다 커버가능

this.changeImage.bind(this) render 바깥쪽으로 작성된 함수를 사용할때 저런식으로 실행시킨다

.bind(this)를 안하면 화면이 나오자마자 바로 실행되버림

함수작성할때 매개변수를 사용하는법을 못익혀서 일단 저런식으로 state를 이용해서 값가져와서 사용함

this.search()는 같이 render 밖에 나와있는 함수라서 저런식으로 사용

 

보고 익힌거 lcw126.tistory.com/229

HybridApp-React Native 2세대 (Image)

이미지 변경할때 함수쓰는거보고 비슷하게 따라해서 익힘 헷갈릴때 읽어보기