더북(TheBook)

이제 포스트 작성 화면에서 res 라우트 파라미터를 받아와 이를 Image 컴포넌트를 사용해 화면에 보여줍시다. 그리고 이미지 아래에는 TextInput을 보여주세요.

screens/UploadScreen.js

import {useRoute} from '@react-navigation/native';
import React, {useEffect, useRef, useState} from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  Image,
  useWindowDimensions,
} from 'react-native';

function UploadScreen() {
  const route = useRoute();
  const {res} = route.params || {};
  const {width} = useWindowDimensions();

  return (
    <View style={styles.block}>
      <Image
        source={{uri: res.assets[0]?.uri}}
        style={[styles.image, {height: width}]}
        resizeMode="cover"
      />
      <TextInput
        style={styles.input}
        multiline={true}
        placeholder="이 사진에 대한 설명을 입력하세요..."
        textAlignVertical="top"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
  },
  image: {width: '100%'},
  input: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 16,
    flex: 1,
    fontSize: 16,
  },
});

export default UploadScreen;
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.