React Native / navigation v5 3(데이터이동)

 

 

 

home.js 

/데이터를 보내는 화면

import React, {useState} from 'react';
import { View, Text, Button,  FlatList, TouchableOpacity} from 'react-native';
import { globalStyles } from '../styles/global'

export default function Home({navigation}) {


    const [reviews, setReviews] = useState([
        {title:'book a', rating:5, body: 'first book', key:1},
        {title:'book b', rating:4, body: 'second book', key:2},
        {title:'book c', rating:3, body: 'third book', key:3},

    ])
    
    const pressHandler = () => {
        // 페이지 이동. navigate = push
        // 변수는 routes 파일 screens 내 키값을 사용한다
        navigation.navigate('ReviewDetail');
        // navigation.push('ReviewDetail');
    }

    return(
        <View style={globalStyles.container}>
            <FlatList
                keyExtractor={(item)=>item.key.toString()}
                data = {reviews}
                renderItem = {({item})=>(
                    <TouchableOpacity onPress={()=>navigation.navigate('ReviewDetail', item)}>
                        <Text style={globalStyles.titleText}>{item.title}</Text>
                    </TouchableOpacity>
                )}
            />
        </View>
    )
}

 

 

 

 

 

reviewDetail.js

/데이터를 받는 화면

 

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

export default function ReviewDetails({route, navigation}) {
    
    //console.log(route);
    //Object {
    // "key": "ReviewDetail-0Usc5qCRgsEyeyziEt3gE",
    // "name": "ReviewDetail",
    // "params": Object {
    //     "body": "second book",
    //     "key": 2,
    //     "rating": 4,
    //     "title": "book b",
    // },
    // }

    const pressHandler = () => {
        // 뒤로 돌아가기. goBack = pop
        navigation.goBack();
        // navigation.pop();
    }

    return(

        <View style={styles.container}>
            <Text>{route.params.title}</Text>
            <Text>{route.params.rating}</Text>
            <Text>{route.params.body}</Text>
        </View>
    )
}

const styles = StyleSheet.create({
  container: {
      padding:24
  }
});

onPress={()=>navigation.navigate('이동할 screen이름', 데이터)} 로 데이터를 보내서

{route.params.데이터key')} 로 데이터를 받는다.

 

 

 

 

 

 

 

(왼)리스트 클릭 시 (오) 상세화면이 보이도록 구현

 

 

 

https://reactnavigation.org/docs/params/