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)
}