今回はYahoo! JAPAN 大阪での開催でした。
5分なのにライブコーディングしてしまいましたが、どうにかなりました。
スライドではgif画像がアニメーションしないので、下に貼りつけておきます。
Live Reloadの紹介。
クリックカウンタを作ってみるところ。
時間が足りなくなると思っていろいろ説明を飛ばしたり、 後の質問なんかでいろいろ自分の回答に間違いがあったりしたので、いろいろ補足させていただきます。
JSXについて
上のgif画像上で編集しているindex.ios.jsのコードはJSXという、Facebookが提案しているJSの拡張言語です。
内部的には、Babel + ES2015プラグイン + JSXプラグインを利用しているようです。
ネットワークまわりセキュリティまわりどうなの？
開発ではローカルサーバを使う状態になっていて、このときのATSの設定は「Allow Arbitrary Loads」な状態です。
ただし、Using offline bundle あたりによると、ファイルバンドルを用いるようにビルドすればオフラインで利用できるようになるみたいです。
なので、ATSの設定を消して、オフラインバンドルを利用すると、質問にあったような問題はなくなるかと思います。
オフラインバンドルを利用するには、AppDelegate.mが次のようになっているので、
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
/**
* Loading JavaScript code - uncomment the one you want.
*
* OPTION 1
* Load from development server. Start the server from the repository root:
*
* $ npm start
*
* To run on device, change `localhost` to the IP address of your computer
* (you can get this by typing `ifconfig` into the terminal and selecting the
* `inet` value under `en0:`) and make sure your computer and iOS device are
* on the same Wi-Fi network.
*/
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
/**
* OPTION 2
* Load from pre-bundled file on disk. The static bundle is automatically
* generated by the "Bundle React Native code and images" build step when
* running the project on an actual device or running the project on the
* simulator in the "Release" build configuration.
*/
//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"MyFirstProject"
initialProperties:nil
launchOptions:launchOptions];
:
上記のOption 2のほうを選択して (コメントを外して)、リリースビルドすればいいみたいです。
ネイティブUIを簡単に使えるようになるの？
Objective-Cでビューをつくる場合だと、
- (ObjC)
RCTViewManagerを継承する - (ObjC)
RCT_EXPORT_MODULE()を足す - (ObjC)
- viewメソッドを実装する - (JS) Nativeコードを呼ぶためのJSのコードを書く
と利用できるようになるようです。
Objective-Cのコードは、次のような感じ。
@interface RCTMapManager : RCTViewManager
@end
@implementation RCTMapManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [[MKMapView alloc] init];
}
@end
JSのコードは、次のような感じになります。
import { requireNativeComponent } from 'react-native';
module.exports = requireNativeComponent('RCTMap', null);
実際には、プロパティ、イベント、スタイルなんかもきちんと定義してやる必要があります。 詳細は次のページを参照ください。
JSのかわりに他の言語は使えるの？
JSに変換できる言語なら、(無理やり使うのでよければ) だいたいの言語は利用できるような気がします。
TypeScriptはJSXをサポートしていて、react-nativeの型定義みたいなのもあるみたいですし、ちゃんと使える気がします。
制限事項は？
Known Issuesを参照ください。
とりあえず、今のところAndroid Mのパーミッションモデルはサポートしていないなどの問題があります。
将来性は？
似た感じの廃れた技術がいっぱいあるので、どうなるのかなんとも言えません。
Reactを知っているJS使いにとっての敷居は低そうなので、個人的にはそこそこ流行りそうな気はします。
データを頻繁に変える状況でいいよね、的な話
「カンファレンスで使える！」みたいな話はParse Serverあたりの話で、React Nativeとはまったく関係ありませんでした。すみません。
おわりに
会場と食事の提供をくださったヤフー株式会社に感謝いたします。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。