[RN] firebase storage를 이용한 로고 적용

스토리지에 파일을 업로드하고 이름을 클릭하면 해당 파일의 url을 얻을 수 있다.

// src/utils/images.js
// 주소의 쿼리스트링에서 token 제외하고 사용
const prefix =
  'https://firebasestorage.googleapis.com/v0/b/ch9eri0306.appspot.com/o';

export const images = {
  logo: `${prefix}/logo.png?alt=media`,
};

쿼리스트링에서 토큰 부분을 제외하고 사용하는 것을 주의하자
로그인 화면에서는 로그인 전이기 때문에 토큰 없이 접근이 가능해야하기 때문이다.

// src/App.js
const App = () => {
  const [isReady, setIsReady] = useState(false);

  const _loadAssets = async () => {
    const imageAssets = cacheImages([
      require('../assets/splash.png'),
      ...Object.values(images),
    ]);
    const fontAssets = cacheFonts([]);

    await Promise.all([...imageAssets, ...fontAssets]);
  };

// src/screens/Login.js
const Login = ({ navigation }) => {
  return (
    <Container>
      <Image url={images.logo} />

적용 완료!!!

하지만 이러한 에러가 뜬다. 힝.

스토리지 파일 권한 접근 문제다. 보안 규칙을 수정하자.

service firebase.storage {
  match /b/{bucket}/o {
    match /IMG_6662.JPG { //파일 이름
      allow read;
    }
  }
}

이런 식으로!

그럼 이렇게 로고가 뜬다 짜잔~