setOptions

김종민·2022년 5월 31일
0

insta-native

목록 보기
20/36

들어가기
header의 title을 바꾸기 위해서 setOptions를 사용해서 바꿀 수 있다,

1. screens/Me.js


import React, { useEffect } from 'react'
import { Image, Text, View } from 'react-native'
import useMe from '../hooks/useMe'

export default function Me({ navigation }) {
  const { data } = useMe()
  
  ///navigation.setOptions를 이용해 screen의 header 부분을 바꿀 수 있다.
  useEffect(() => {
    navigation.setOptions({
      title: data?.me?.username,
    })
  }, [])
  return (
    <View
      style={{
        backgroundColor: 'black',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Image
        style={{
          width: 80,
          height: 80,
          borderRadius: 25,
          backgroundColor: 'white',
        }}
        source={{ uri: data?.me?.avatar }}
      />
      <Text style={{ color: 'white' }}>{data?.me?.username}</Text>
    </View>
  )
}
profile
코딩하는초딩쌤

0개의 댓글