未分類

ReactNative react-native-paperの使い方

ReactNativeのUIライブラリを使って画面を作り込んでみます。今回使うのは[react-native-paper]を使ってみます。

インストール

yarn add react-native-paper react-native-vector-icons --exact
yarn add @types/react-native-vector-icons -D --exact

iOSの場合

iOS/Podfileに以下の一行を追加します。

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

追加したら以下のコマンドを実行します。

cd ios
pod install --repo-update
cd ..

次にiOS/[アプリ名]/info.plistを編集しましょう。

<key>UIAppFonts</key>
<array>	
	<string>AntDesign.ttf</string>
	<string>Entypo.ttf</string>
	<string>EvilIcons.ttf</string>
	<string>Feather.ttf</string>
	<string>FontAwesome.ttf</string>
	<string>FontAwesome5_Brands.ttf</string>
	<string>FontAwesome5_Regular.ttf</string>
	<string>FontAwesome5_Solid.ttf</string>
	<string>Foundation.ttf</string>
	<string>Ionicons.ttf</string>
	<string>MaterialIcons.ttf</string>
	<string>MaterialCommunityIcons.ttf</string>
	<string>SimpleLineIcons.ttf</string>
	<string>Octicons.ttf</string>
	<string>Zocial.ttf</string>
</array>

できたら以下のコマンドを実行します。

rm -rf ios/build
yarn ios

-未分類