React-Native 0.64.0 화면간 데이터(파라미터) 전달하기

React-Native에서 화면간 데이터 즉 파라미터를 전달하는 방법입니다.

 

• 모듈 버전

react-native : 0.64.0

 

• 파라미터 전달

여러 데이터(파라미터)를 JSON으로 전달하면 됩니다.

this.props.navigation.navigate('SCREEN_ID', {paramName1:paramValue1, paramName2:paramValue2, ...});

 

• 파라미터 받기

this.props.route.params.paramName1 this.props.route.params.paramName2 ...

 

• 예제

(1) 데이터 전달하기

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

export default class MainScreen extends Component {

  state={
    textInputValue:null
  }

  render() {
    return (
      <View>
        <Text style={{fontSize:30}}>Main Screen</Text>
        <TextInput
          style={{ backgroundColor: '#aaaaaa', borderRadius: 5, padding:5, margin:5 }}
          onChangeText={(value) => this.setState({textInputValue: value})}/>
        <Button onPress={() => this.goMainScreen()} title='Go Detail Screen'/>
      </View>
    );
  }

  goMainScreen(){
    this.props.navigation.navigate('DETAIL', {textInputValue:this.state.textInputValue});
  }
}

 

(2) 데이터 받기

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

export default class DetailScreen extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize:30}}>Detail Screen</Text>
        <Text>Paramater Value</Text>
        <Text style={{fontSize:30, backgroundColor: '#aaaaaa', borderRadius: 5, padding:5, margin:5}}>
          {this.props.route.params.textInputValue}
        </Text>
      </View>
    );
  }
}