UIImageEffects.h
+ (UIImage*)imageByApplyingBlurToImage:(UIImage*)inputImagewithRadius:(CGFloat)blurRadiustintColor:(UIColor *)tintColorsaturationDeltaFactor:(CGFloat)saturationDeltaFactormaskImage:(UIImage *)maskImage;
XcodeでNew>Projectをする
iOS、Framework & Libraryを選択し、Cocoa Touch Static Libraryを選択
$(SRCROOT)/../../React
$(SRCROOT)/../react-native/React
$(SRCROOT)/node_modules/react-native/React
githubを参照
https://github.com/hrk-ys/react-native-userdefaults/tree/master/RNUserDefaultsManager
$ npm init
package名やversionなど適度に変更
{
"name": "react-native-userdefaults",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
github参照
https://github.com/hrk-ys/react-native-userdefaults/blob/master/index.js
$ react-native init UserDefaultsExample
依存モジュールに作成中のモジュールを追加
"dependencies": {
"react-native": "^0.4.4",
"react-native-userdefaults": "file:../"
}
Library に node_modules/react-native-userdefaults/RNUserDefaults.xcodeproj/ を追加
Linked Frameworks and LibrariesにlibRNUserDefaults.aを追加
これが正しいのか不明・・・
index.jsやRNUserDefaultsManager.[mh]を更新したら、Exampleプロジェクトの方で、以下を実行
$npm uninstall react-native-userdefaults
$npm install
参考 http://facebook.github.io/react-native/docs/nativemodulesios.html#content
#import "RCTBridgeModule.h"
@interface SampleManager : NSObject <RCTBridgeModule>
@end
@implementation SampleManager
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(callFunc:(NSString *)name param:(NSString *)param dict:(NSDictionary*)dict findEvents:(RCTResponseSenderBlock)callback)
{
NSLog(@"name: %@", name);
NSLog(@"str: %@", param);
NSLog(@"dict: %@", dict);
callback(@[ [NSNull null], @{ @"hoge": @"val" } ]);
}
@end
var SampleManager = require('NativeModules').SampleManager;
SampleManager.callFunc(
'action',
'string_param1',
{ foo: 'bar'},
(error, ret) => {
if (error) {
console.error(error);
} else {
console.log(ret);
}
}
);
RCTRootViewやBridgeModuleのインスタンスにbridgeがあるので、それを使う
ここは公式ドキュメントもちょっと間違ってました
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
[self.rootView.bridge.eventDispatcher sendDeviceEventWithName:@"callFuncName"
body:@{@"name": @"foo"}];
var subscription;
ar SimpleApp = React.createClass({
callFromNative: function(params) {
console.log(params);
this.setState({ name: params.name });
},
componentDidMount: function() {
// 登録
subscription = DeviceEventEmitter.addListener('callFuncName', this.callFromNative);
},
componentWillUnmount: function() {
// 解除
subscription.remove();
},
...
});
Swift未対応
#import "RCTViewManager.h"
@interface RCTSampleViewManager : RCTViewManager
@end
@implementation RCTSampleViewManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
UIView* view = [[UIView alloc] init];
view.frame = CGRectMake(0, 0, 100, 100);
view.backgroundColor = [UIColor greenColor];
UILabel* l = [[UILabel alloc] init];
l.text = @"hogehoge";
l.textColor = [UIColor redColor];
[l sizeToFit];
[view addSubview:l];
return view;
}
@end
SampleView.js
'use strict';
var { requireNativeComponent } = require('react-native');
module.exports = requireNativeComponent('RCTSampleView', null);
index.ios.js
var SampleView = require('./SampleView');
...
render() {
return (
<View style={styles.container}>
<Text>Hello ReactNative!!!</Text>
<SampleView />
</View>
);
}
http://facebook.github.io/react-native/docs/asyncstorage.html#content
ネイティブとで使っているCookieを引き継ぐことは可能？
#import "ReactNativeSupport.h"
@implementation ReactNativeSupport
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(requestCookies: (RCTResponseSenderBlock)callback)
{
NSDictionary* cookies = @{ @"session_id" : @"hogehogeho" };
callback(@[ [NSNull null], cookies ]);
}
@end
JS
var cookie;
fetchData() {
var cookie = "";
for (var name in cookies) {
cookie += name + "=" + cookies[name] + ";";
}
fetch(API_URL,
{ method: 'POST',
body: JSON.stringify({"foo":"hoge"}),
headers: {
'cookie': cookie,
}
})
.then((response) => {
console.log(response.headers.map['set-cookie']); // Cookieが取得できる
return response.json();
})
.then((responseData) => {
console.log(responseData);
})
.catch((error) => {
console.warn(error);
});
}
componentDidMount() {
var Support = require('NativeModules').ReactNativeSupport;
Support.requestCookies(
(error, ret) => {
if (error) {
console.error(error);
} else {
cookies = ret;
this.fetchData();
}
}
);
headersで指定しない場合は、responseにset-cookieが入ってきても設定されない。
一度headersで指定すれば、次のアクセスからは指定されている
ベクター画像だとうまく動かなかった
pod 'React/RCTImage'
<Image source={require('image!image_name')} />
cocoapodsで作ったプロジェクトや、Integration with Existing Appで作ったプロジェクトでは packega.jsonを作らないと、別ファイルの読み込みができない。
nodeやってる人には常識かな？
コードを細部まで追ってないですが、0.4.1以降を使わないとNativeで定義したViewを使うことができない
ドキュメントに書いてないけど読み込めない
react-native init AwesomeProject
// webから取得する場合
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
// アプリ内のファイルを使う場合
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// 描画させる
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
launchOptions:launchOptions];
$ curl 'http://localhost:8081/index.ios.bundle?dev=false&minify=true' -o iOS/main.jsbundle
pod 'React'
pod 'React/RCTText'
#import <RCTRootView.h>
@IBOutlet weak var wrapView: UIView!
var rootView:RCTRootView? = nil
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
var jsCodeLocation = NSURL(string:"http://localhost:8081/index.ios.bundle")
rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "SimpleApp", launchOptions: nil)
rootView!.frame = wrapView.bounds
wrapView.addSubview(rootView!)
}
'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class SimpleApp extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>This is a simple application.</Text>
</View>
)
}
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)
pod 'React/RCTWebSocketDebugger
override func motionEnded(motion: UIEventSubtype, withEvent event: UIEvent) {
rootView?.motionEnded(motion, withEvent: event)
}
-com.apple.CoreData.ConcurrencyDebug 1
ssh-add -l
2048 XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX /Users/hrk/.ssh/id_rsa (RSA)
ssh-add -K .ssh/id_rsa_hoge
Identity added: id_rsa_hoge (id_rsa_hoge)
NSStringからStringクラスに変更されたvar str = "Hello"
var len = countElements(str) // 5
substringToIndexやsubstringFromIndexなどは注意が必要(str as NSString).substringFromIndex(3)
var index = advance(str.startIndex, 3)
var str2 = str.substringToIndex(index)
ナビゲーションコントローラの画面遷移をカスタマイズする
具体的なアニメーションを定義するクラス。実行時間やviewの動きなど。
画面遷移の進捗を把握するクラス？途中経過や中止、完了などを教えてあげれば良きに計らってくれる。 UIPercentDrivenInteractiveTransitionを使うと楽
// pushやpopされたコントローラが渡されるので、適切なアニメーション定義クラスを返す
func navigationController(
navigationController: UINavigationController,
animationControllerForOperation operation: UINavigationControllerOperation,
fromViewController fromVC: UIViewController,
toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
}
// ここは何も気にせずにUIPercentDrivenInteractiveTransitionを返すが良い
func navigationController(navigationController: UINavigationController,
interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
}
今回はナビゲーションバーにおけるスワイプでのページ切り替えなので、NavigationControllerを継承したクラスでやってみる
わかりやすく、PushとPopで分けて書く
class PushAnimatedTransitioning : NSObject, UIViewControllerAnimatedTransitioning {
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
// 遷移元のVC
var fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!
// 遷移先のVC
var toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)!
// 表示中のView
var containerView = transitionContext.containerView()
var duration:NSTimeInterval = self.transitionDuration(transitionContext)
// アニメーション終了時のframeを取得
toViewController.view.frame = transitionContext.finalFrameForViewController(toViewController)
// 右端から出すため初期値は幅分をプラスする
toViewController.view.center.x += containerView.bounds.width
containerView.addSubview(toViewController.view)
UIView.animateWithDuration(duration,
animations: { () -> Void in
// 先ほどプラスした幅分を戻す
toViewController.view.center.x -= containerView.bounds.width
}, completion: { (Bool) -> Void in
// キャンセルされていなければ完了
transitionContext.completeTransition(!transitionContext.transitionWasCancelled());
})
}
func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval {
return 0.3
}
}
override func viewDidLoad() {
super.viewDidLoad()
self.delegate = self
}
// 画面遷移するときに使われるアニメーションを返す
func navigationController(navigationController: UINavigationController,
animationControllerForOperation operation: UINavigationControllerOperation,
fromViewController fromVC: UIViewController,
toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
if operation == .Push {
return PushAnimatedTransitioning()
}
return nil
}
// UIPercentDrivenInteractiveTransitionを返す
func navigationController(navigationController: UINavigationController, interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
return self.interactiveTransition
}
UINavigationControllerのdelegateで設定。ここは特にどこでも良い
func navigationController(navigationController: UINavigationController, didShowViewController viewController: UIViewController, animated: Bool) {
var gesture = UIPanGestureRecognizer(target: self, action: "panGesture:")
gesture.delegate = self
viewController.view.addGestureRecognizer(gesture)
}
// 横スワイプのみ対応
func gestureRecognizerShouldBegin(gestureRecognizer: UIPanGestureRecognizer) -> Bool {
var location = gestureRecognizer.translationInView(gestureRecognizer.view!)
if self.nextViewController == nil { return false }
return fabs(location.x) > fabs(location.y)
}
func panGesture(recognizer: UIPanGestureRecognizer) {
var location = recognizer.translationInView(recognizer.view!)
// どれくらい遷移したかを 0 〜 1で数値化
var progress = fabs(location.x / (self.view.bounds.size.width * 1.0));
progress = min(1.0, max(0.0, progress));
// 次の画面が設定してなければ処理は継続しない
if (self.nextViewController == nil) { return }
if (recognizer.state == .Began) {
// 左へのスワイプのみ
if location.x > 0 { return }
self.interactiveTransition = UIPercentDrivenInteractiveTransition()
// ページ遷移させる!!!!!!
self.pushViewController(self.nextViewController!, animated: true)
}
else if (recognizer.state == .Changed) {
// 変化量を通知させる
self.interactiveTransition?.updateInteractiveTransition(progress)
}
else if (recognizer.state == .Ended || recognizer.state == .Cancelled) {
// 終了かキャンセルか
if self.interactiveTransition != nil {
if (progress > 0.5) {
self.interactiveTransition?.finishInteractiveTransition()
self.nextViewController = nil
}
else {
self.interactiveTransition?.cancelInteractiveTransition()
}
}
self.interactiveTransition = nil;
}
}
storyboardなどでUINavigationControllerのClassをSwipeNavigationControllerにして、 スワイプで遷移させたいViewControllerを設定する。 callbackとかでもよかったけどちょっとめんどくさいかったので。。
if let navi = self.navigationController as? SwipeNavigationController {
navi.nextViewController = vc
}
全体のコードはGithubで。