React NativeでSVGのサイズを変更する方法

SVGのサイズを変更するためには、いくつかの方法があります。以下に、いくつかのコード例を示します。

スタイルシートを使用する方法:

import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
svgContainer: {
width: 200, // 好きなサイズに変更
height: 200,
},
});
// JSX内で使用する際には、スタイルシートを適用します
<View style={styles.svgContainer}>
<SvgComponent width={200} height={200} />
</View>

react-native-svg-transformerパッケージを使用する方法: まず、react-native-svg-transformerパッケージをインストールします:
```
npm install --save-dev react-native-svg-transformer
```

Metro Bundlerの設定ファイル（metro.config.jsまたはmetro.config.json）に、以下のような設定を追加します:

const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

これにより、SVGファイルをインポートしてコンポーネントとして使用できるようになります。その際、widthとheightプロパティを指定してサイズを変更します。

import SvgComponent from './path/to/svg/component.svg';
// JSX内で使用する際には、サイズを指定します
<SvgComponent width={200} height={200} />

これらはReact NativeでSVGのサイズを変更するための一般的な方法です。他にもSVGコンポーネントのプロパティやスタイルを調整することで、より詳細なカスタマイズが可能です。