我是一名有用的助手,可以为您翻译文本。
我正在处理一个大型已存在的Android和iOS项目,我所在的团队希望采用React Native。起初,我们想在RN中实现一个单一的功能,因为我们没有足够的能力一次性迁移整个项目。
我成功地添加了一个RN视图,无论是从本地节点服务器还是来自位于资产文件夹中的JS捆绑文件,但感觉有点hacky。我知道这在iOS上支持,但我在文档中找不到任何关于与现有Android项目集成的信息。以下是我想出的要点:
这是一个完整的hack。当我实际上只是将视图添加到屏幕时,调用
我正在处理一个大型已存在的Android和iOS项目,我所在的团队希望采用React Native。起初,我们想在RN中实现一个单一的功能,因为我们没有足够的能力一次性迁移整个项目。
我成功地添加了一个RN视图,无论是从本地节点服务器还是来自位于资产文件夹中的JS捆绑文件,但感觉有点hacky。我知道这在iOS上支持,但我在文档中找不到任何关于与现有Android项目集成的信息。以下是我想出的要点:
public class ReactNativeView extends FrameLayout {
private static final String COMPONENT_NAME = "AwesomeProject";
// Path of our RN module relative to project root
private static final String MODULE_NAME = "react-sources/index.android"
public ReactNativeView(Context Context) {
super(context);
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
.setApplication(AppDelegate.sharedApplication())
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.BEFORE_RESUME);
if (BuildConfig.USE_RN_LOCAL_SERVER) {
// Set module name to be loaded from local node server
builder.setJSMainModuleName(MODULE_NAME);
} else {
Uri uri = AssetsManager.getInstance().getJsBundleUri();
// Load bundled jsBundle
builder.setJSBundleFile(uri.getPath());
}
ReactInstanceManager reactInstanceManager = builder.build();
MainActivity mainActivity = MainActivity.getMainActivity();
setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
ReactRootView reactRootView =
new ReactRootView(AppDelegate.sharedApplication().getTopActivity());
// Is it really necessary to call 'startReactApplication' each time we want to render a react component?
reactRootView.startReactApplication(reactInstanceManager, COMPONENT_NAME, null);
addView(reactRootView);
// After the view is added to the hierarchy we call the manager's 'onResume' function
// to show the react view
reactInstanceManager.onResume(mainActivity, mainActivity); // <-- What kind of sorcery is this?!
}
}
我还添加了一个变量到BuildConfig中,用于确定要使用哪个JS包:
buildTypes {
debug {
buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "true" // load from local server
}
release {
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "false"
}
}
这是一个完整的hack。当我实际上只是将视图添加到屏幕时,调用
startReactApplication
感觉很奇怪。我是否错过了某个API或这不是目前支持的情况?