需求
從androidManifest.xml 或者 ios Info.plist 定義變量，根據(jù)變量對 app 作相應處理
尋找方案
打開app遠程調(diào)試 Debug JS remotely 的時候鸥鹉，可以在瀏覽器中看到 Running application *** with appParams:{"rootTag":1, "initialProps":{}}..如下圖:
調(diào)試截圖
看到 initialProps 我們能猜想到公你，初始化app的時候，肯定有方法可以從原生傳值給React Native
解決方案
android 部分
MainActivity.java
package com.helloworld;
import android.content.Context;
import android.content.pm.ApplicationInfo;
import android.content.pm.PackageManager;
import android.os.Bundle;
import android.support.annotation.Nullable;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "Hello React Native";
}
@Override
protected void onResume() {
super.onResume();
}
@Override
protected void onPause() {
super.onPause();
}
/**
* 新增方法 傳launch options
*/
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Nullable
@Override
protected Bundle getLaunchOptions() {
Bundle initialProps = new Bundle();
Context context = MainApplication.applicationContext;
String channelName = "auto";
String appType = "app";
try {
PackageManager packageManager = context.getPackageManager();
if (packageManager != null) {
// 注意此處為ApplicationInfo 而不是 ActivityInfo,因為友盟設置的meta-data是在application標簽中璃弄，而不是某activity標簽中哥捕，所以用ApplicationInfo
ApplicationInfo applicationInfo = packageManager.getApplicationInfo(context.getPackageName(), PackageManager.GET_META_DATA);
if (applicationInfo != null) {
if (applicationInfo.metaData != null) {
channelName = applicationInfo.metaData.getString("UMENG_CHANNEL");
appType = applicationInfo.metaData.getString("APP_TYPE");
}
}
}
} catch (PackageManager.NameNotFoundException e) {
channelName = "auto";
appType = "app";
}
initialProps.putString("appChannel", channelName);
initialProps.putString("appType", appType);
return initialProps;
}
};
}
}
iOS 部分
從 Info.plist 獲取所需鍵值對牧抽，傳值給React Native
AppDelegate.m
// 這里 初始化某些 appType 和 appChannel
NSString *bundlePath = [[NSBundle mainBundle] pathForResource:@"Info" ofType:@"plist"];
NSMutableDictionary *dict = [NSMutableDictionary dictionaryWithContentsOfFile:bundlePath];
NSString *appType = [dict objectForKey:@"AppType"];
NSString *appChannel = [dict objectForKey:@"AppChannel"];
// 這里
NSDictionary *initialProps = [NSDictionary dictionaryWithObjectsAndKeys:appType, @"appType", appChannel, @"appChannel", nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"HelloReactNative"
initialProperties:initialProps // 還有這里
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
React Native 部分
調(diào)試截圖
如上圖，調(diào)試發(fā)現(xiàn)已經(jīng)把值傳過來啦遥赚，
index.ios.js
index.android.js
import React, {Component} from 'react';
import {
AppRegistry
} from 'react-native';
import HelloReactNative from './App/View/HelloReactNative';
AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);
HelloReactNative.js
import React, {Component} from "react";
import {View,Text} from "react-native";
export default class HelloReactNative extends Component {
constructor(props) {
super(props);
this.lastBackPressed = 0;
// 從 initialProps 讀取
this.appType = props.hasOwnProperty('appType') ? props.appType : 'app';
this.appChannel = props.hasOwnProperty('appChannel') ? props.appChannel : 'auto';
}
render() {
return (
<View>
<Text>Hello React Native {this.appType} {this.appChannel}</Text>
</View>
);
}
}
哦了
歡迎留言交流 : D
