Lean Engineer

リーンエンジニア〜効率的に実験しながら、技術を学ぶブログ

ネイティブアプリからReactNativeに情報を渡す方法

 ネイティブアプリからReactNativeに情報を渡すには、initialPropertiesに渡してあげれば良い。すると、表示するReactNativeのmoduleのpropsに情報が入る。

RCTRootView *rootView = [[RCTRootView alloc] 
        initWithBundleURL:jsCodeLocation
        moduleName:@"App"
        initialProperties:@{@"fromNative" : @"Hello from Native"}
        launchOptions:nil];
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>This value is from Native :{this.props.fromNative}</Text>
      </View>
    );
  }
}

 これで、ネイティブから渡した情報が表示される。

 initialPropertiesにはDictionaryが渡せるので、例えばユーザー情報などを送るなどして、表示すればよいだろう。

 ちなみに、Mantleを使っていて、Mantleのモデルを、Dictionaryにするには、こんな感じ。

NSError *error = nil;
NSDictionary *userDic = [MTLJSONAdapter JSONDictionaryFromModel:user error:&error];
NSDictionary *props = @{@"user" : userDic};

 これで、ガバっとReactNative側にモデルを持っていくことができる。Mantle使っていると、keyももともとのJSONの形式に戻してくれるので、いい感じ。