ロゴ

Welcome画面に表示するロゴを追加しましょう。

イメージの追加

ロゴイメージを追加します。まずはPNG画像ファイルをImageSourcePropType型としてimportするために、モジュール定義を追加します。

次のファイルを追加してください。

src/@types/image.d.ts

src/@types/image.d.ts
declare module '*.png' {
  import {ImageSourcePropType} from 'react-native';
  const value: ImageSourcePropType;
  export default value;
}

備考

上記モジュール定義の詳細は、TypeScript公式ドキュメントのWildcard module declarationsを参照してください。

src/assets/logo.pngにロゴイメージとしてこちらの画像を追加してください。

ロゴ部品の追加

ロゴはImageコンポーネントを用いて直接表示できますが、画面サイズに応じたスタイル調整といった計算処理もあるので、共通部品として作成しましょう。次のファイルを追加・修正してください。

src/components/basics/image/Logo.tsx
src/components/basics/image/index.ts
src/components/basics/index.ts

src/components/basics/image/Logo.tsx
import logoImage from 'assets/logo.png';
import React from 'react';
import {Dimensions, Image, ImageSourcePropType, ImageStyle, StyleProp, StyleSheet} from 'react-native';

interface Props {
  source?: ImageSourcePropType;
  style?: StyleProp<ImageStyle>;
}

export const Logo: React.FC<Props> = ({source = logoImage, style}) => {
  return <Image source={source} resizeMode="contain" style={[styles.image, style]} />;
};

const {width, height} = Dimensions.get('window');
// 見た目の調整として画面の3分の1をデフォルトサイズとする
const defaultImageSize = Math.min(width, height) * (1 / 3);

const styles = StyleSheet.create({
  image: {
    width: defaultImageSize,
    height: defaultImageSize,
  },
});

src/components/basics/image/index.ts
export * from './Logo';

src/components/basics/index.ts
+ export * from './image';
  export * from './view';

追加が出来たらWelcome画面にロゴを追加します。

次のファイルを修正してください。

src/screens/home/Welcome.tsx

src/screens/home/Welcome.tsx
  import {useNavigation} from '@react-navigation/native';
+ import {Logo} from 'components/basics';
  import React from 'react';
  import {StyleSheet, View} from 'react-native';
  import {Button, Text} from 'react-native-elements';
  
  export const Welcome: React.FC = () => {
    const navigation = useNavigation();
    return (
      <View style={styles.container}>
+       <Logo />
        <Text h1>Welcome</Text>
        <View>
          <Button onPress={() => navigation.navigate('Instructions')} title="登録する" />
        </View>
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

修正できたら実行してください。 Welcome画面にロゴが表示されれば成功です。

Welcome

危険

ロゴが表示されない場合は、キャッシュが残っている可能性があります。こちらのリンクを参考にキャッシュを削除してください。

イメージの追加​

ロゴ部品の追加​

イメージの追加

ロゴ部品の追加