ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

react-native-webを使ったみた

github.com

アプリとWebで一部同じコンポーネントを使いたくなったので使ってみた

導入

yarn add  react-native-web

↑実行する

こんな感じでweb使える

Welcome.js

import React from "react";
import { Text, View } from "react-native";

export default () => {
  return (
    <View>
      <Text>Welcome</Text>
    </View>
  );
};

react-native-webをインストールするとWeb上でreact-nativeコンポーネントを使える

さらに上記のコンポーネントは、Webで使用できるコンポーネントなので以下のようにwebの要素と一緒に使用できる

import React from "react";
import Welcome from "./Welcome";

export default () => {
  return (
    <div>
      ようこそ
      <br/>
      <Welcome />
    </div>
  );
};

実際に使ってみた

まだコードの共有化はしていないこんな感じになった

github.com

アプリ

f:id:wheatandcat:20190313083852j:plain:w300

Web

f:id:wheatandcat:20190313084102p:plain:w300