![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2017-05-12T11:36:58+00:00","default:admin","admin") #author("2023-03-15T02:50:13+00:00","default:admin","admin") -[[React Native:https://facebook.github.io/react-native/]] -[[React Nativeで変わるアプリ開発 高木 健介 先生 - Schoo（スクー）:https://schoo.jp/class/3815]] -[[React Nativeとネイティブアプリでの開発の違いとは:https://techacademy.jp/magazine/11652]] -[[ReactNativeで何が出来るのかさっと知れるサイト、その他リンクまとめ:http://qiita.com/imaimiami/items/8e62a5111fe48a65b911]] -[[React Nativeはアプリ開発者の夢を見るか？ - アニマネ開発日誌:http://animane.hatenablog.com/entry/2016/07/24/181833]] -React native meetup ... プレゼン資料が見れる --[[React.js meetup × React Native meetup:https://react-native-meetup.connpass.com/event/49024/]] ---[[What is React Native?:https://speakerdeck.com/januswel/what-is-react-native]] --[[react-native meetup#4:https://react-native-meetup.connpass.com/event/46778/]] --[[react-native meetup#3:https://react-native-meetup.connpass.com/event/40745/]] --[[react-native meetup#2:https://react-native-meetup.connpass.com/event/32213/]] --[[react-native meetup#1:https://react-native-meetup.connpass.com/event/30484/]] -[[create-react-native-app触ってみた！！:http://qiita.com/Shagamii/items/c3205bb64ccaa5258077]] -[[create-react-native-appとexpoを使って10分でプッシュ通知を試す:http://qiita.com/taco/items/4a47704778ca6d96d46f]] -[[React Nativeアプリの開発環境をコマンド一発で構築する「create-react-native-app」:https://mae.chab.in/archives/59673]] -[[Expo、iPhoneなどでReact Nativeアプリのリアルタイムプレビューが可能なPlaygroundサービス「Expo Sketch」を公開:http://applech2.com/archives/20170316-playground-for-react-native.html]] -[[Expo Sketch:https://snack.expo.io]] ... ここでコードを変更して保存する度に新規URLが発行されるので、これを通知すれば他の人に共有できる -[[ReactNative とFlutter パフォーマンス比較:https://recruit.gmo.jp/engineer/jisedai/blog/reactnative-vs-flutter-performance/]] -[[React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する:https://eh-career.com/engineerhub/entry/2020/02/06/103000]] -[[【入門】はじめての React Native:https://qiita.com/nskydiving/items/41e446ef5c821359ab79]] -[[React Nativeでメモアプリを作ろう～作成画面の構築と実データの利用:https://codezine.jp/article/detail/12328]] *開発 [#e7a7b478] **環境構築からプロジェクト作成、実行まで [#t2cf343e] -create-react-native-app のインストール $ npm install -g create-react-native-app -スマートフォンにExpoをインストール --Google Play などで「Expo」を検索してインストール --わからない場合は[[Expo:https://expo.io]] のサイトを参照のこと -プロジェクト作成 $ create-react-native-app [プロジェクト名] -プロジェクト起動 $ cd [プロジェクト名] $ nom start -起動すると大きなQRコードが表示される -スマートフォンでExpoを起動し、QRコードを読み込むとアプリが実行される（読み込みには時間がちょっと時間がかかる） -App.js が index.js に相当 -以下のような従来のプログラムの場合、最後に「export default [クラス];」を追記 : const SimpleApp = StackNavigator({ Home: { screen: MainScreenNavigator }, Chat: { screen: ChatScreen }, }); AppRegistry.registerComponent('SimpleApp', () => SimpleApp); export default App; <== これを追記 **スタンドアローン版へのビルド [#nb5fa1e4] -[[Building Standalone Apps - Expo:https://docs.expo.io/versions/v15.0.0/guides/building-standalone-apps.html]] -exp のインストール $ npm install -g exp *Navigation [#udff2421] やり方が乱立していてどれを選んだらいいのやら... -[[React.js × React Native meetup アンケート質問に答えたい:http://qiita.com/janus_wel/items/6bc7263f47c6221f52c1]] ... これの一番最後に Navigation に関するQAがある -[[ReactNativeでページ遷移（ルーティング）を実装する:https://blog.mismithportfolio.com/web/20161224rnrouting]] -[[ReactNativeでページ遷移（ルーティング）を実装する②:https://blog.mismithportfolio.com/web/rnrouting2]] -[[react-navigation:https://reactnavigation.org/]]（[[docs:https://reactnavigation.org/docs/intro/]]） --元は [[Expo:https://expo.io]] が作った [[ExNavigation:https://github.com/expo/ex-navigation]] らしい --画面コンポーネントにナビゲーション用のデータを定義しなければならない --とりあえず [[Getting Started:https://reactnavigation.org/docs/intro/]] をやってみよう！ -[[react-router-native:https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native]] --react-router の Native版なので、知見や感覚を使いまわせるのがメリット --あまりネイティブとして自然な遷移にならないという噂 -[[react-native-router-flux:https://github.com/aksonov/react-native-router-flux]] --簡単な遷移であればサッと作れるが、少し複雑なことをしようとすると難しくなる --テストが非常に書きにくい -[[native-navigation:https://github.com/airbnb/native-navigation]] --React Conf 2017 で大々的にアナウンスされた AirBnB 製 --導入が手間らしい -[[Navigation:https://facebook.github.io/react-native/docs/navigation.html]] --標準で提供されている --状態を持たず、開発者がいい感じに制御できる --&color(red){0.43以降、非推奨になった}; *Tips [#y81645dc] -AppRegistry.registerComponent('NativeApp', () => App); --Native に登録するアプリケーション名と、それに対応するアプリを指定
