Help us understand the problem. What is going on with this article?

【備忘録】Expoでreact-native-paperの導入手順

注意点

React Native >= 0.50.3だと導入できないみたいです。
あまり当てはまるケースは少ないと思いますが・・・

導入

ReactNativeで実装する際、UIコンポーネントって選ぶのにどれがいいかなーって迷いますよね
そこでReact-native-paperをおすすめします
特徴以下です。
・ReactNativeのUIコンポーネントの一つ
・マテリアルデザインのライブラリ
・テーマの一括変換が可能(流行りのダークモード等の設定が楽)
・多くのコンポーネントが用意されている

詳しくは他の方の記事を参考にしてください(めんどくさい)
公式DOCもあるので参考にしてください。
公式DOC

Expoのプロジェクト作成

expo init paperSample

React-Native-Paperの導入

以下、コマンドを入力してください

yarn add react-native-paper

npmでインストールする場合は以下

npm install react-native-paper

軽く動作確認

expo start

親画面となる画面を呼び出す際は、<PaperProvider>で囲む必要があるので囲みます。

./App.js
import React from 'react';
import HomeScreen from './screens/HomeScreens';
import { Provider as PaperProvider } from 'react-native-paper';

export default function App() {
  return (
    <PaperProvider>
      <HomeScreen />
    </PaperProvider>
  );
./screens/HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
    return (
        <View style={styles.container}>
            <Text>WelCome HomeScreen</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

スクリーンショット 2020-02-16 17.29.08.png

react-native-paperが提供しているボタンでも配置してみます。

./screens/HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-paper';

export default function HomeScreen() {
    return (
        <View style={styles.container}>
            <Text>WelCome HomeScreen</Text>
            <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
                Press me
            </Button>
        </View>

    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

スクリーンショット 2020-02-16 17.32.45.png

できました。これで導入終わりです。

まとめ

他にもいろんなコンポーネントがあるので使ってみてください!
どんなUIがあるか調べたい方はexpoのスマホアプリで確認できるので参考までに。
またいろんなreact-native-paperについては記載します!
では!
expoサンプル
公式DOC

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした