안드로이드가 네이티브 UI 구성 요소를 네이티브 스크린에 노출시키는 방법은 무엇입니까?

Question

나는 네이티브 앱을 사용하고 싶습니다. 이미 큰 응용 프로그램이므로 모든 것을 한꺼번에 마이그레이션하고 싶지 않습니다.

예를 들어 내 바코드는 약간 복잡하며 지금은 기본으로두고 싶습니다. 예를 들면 : 나는

로 안드로이드와 반응 기본 구성 요소 사이의 화면 분할을 원하는

아래 그림을 참조하십시오

안드로이드 네이티브의 하단 바, 원주민

주 반응에 업데이트 된 페이지 내용 : React 네이티브 브릿지 (React Native Bridge)를 구축하고 환경에 반응하기 위해 안드로이드 네이티브 바 (bottom bar)를 드러내지 만 화면에는 아무 데나 나타나지 않고 반응 내용 만 보여줍니다.

나는이 방법으로 복잡성의이 종류를 해결 한

Answer 1

:

전 :이

mReactRootView = new ReactRootView(this); 
    mReactInstanceManager = ReactInstanceManager.builder() 
      .setApplication(getApplication()) 
      .setBundleAssetName("index.android.bundle") 
      .setJSMainModuleName("index.android") 
      .addPackage(new MainReactPackage()) 
      .addPackage(new OloRNBridgeReactPackage()) 
      .setUseDeveloperSupport(BuildConfig.DEBUG) 
      .setInitialLifecycleState(LifecycleState.RESUMED) 
      .setCurrentActivity(MenuActivity.this) 
      .build(); 

    mReactRootView.startReactApplication(mReactInstanceManager, "JSMain", null); 
    setContentView(mReactRootView); 

결과 :

그것은에서 JSMain 내용이 렌더링 반작용 기본 만 Android 네이티브 바텀 바를 포함하지 않습니다.

후 :

1. 이 activity_react_footer 안드로이드 레이아웃 XML 파일 을 작성하고 구성 요소 반응에 포함 할 것을 안드로이드 UI 구성 요소를 추가합니다. 또한로드 JS 구성 요소와 TabLayout로 활동 한 후 findViewById를 ReactRootView에서

   <?xml version="1.0" encoding="utf-8"?> 
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:punchh="http://schemas.android.com/apk/res-auto" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical"> 
   <com.facebook.react.ReactRootView 
       android:id="@+id/react_root" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"/> 
   <android.support.design.widget.TabLayout 
       android:layout_weight="9" 
       android:id="@+id/tabLayout" 
       app:tabGravity="fill" 
       app:tabMode="fixed" 
       android:layout_width="match_parent" 
       android:layout_height="fill_parent" 
       android:background="?attr/colorPrimary" 
       android:minHeight="?attr/actionBarSize" 
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> 
   </LinearLayout> 
   

2. 팽창 레이아웃.

   setContentView(R.layout.activity_react_footer); 
   mReactInstanceManager = ReactInstanceManager.builder() 
        .setApplication(getApplication()) 
        .setBundleAssetName("index.android.bundle") 
        .setJSMainModuleName("index") 
        .addPackage(new MainReactPackage()) 
        .addPackage(new OloRNBridgeReactPackage()) 
        .setUseDeveloperSupport(BuildConfig.DEBUG) 
        .setInitialLifecycleState(LifecycleState.RESUMED) 
        .setCurrentActivity(MenuActivity.this) 
        .build(); 
   mReactRootView = (ReactRootView) findViewById(R.id.react_root); 
   mReactRootView.startReactApplication(mReactInstanceManager, "JSMain", null); 
   tabLayout = (TabLayout) findViewById(R.id.tabLayout); 
   

결과 :이 방법은 기본 안드로이드에서 화면에 모두 내용을 포함하고 반응한다

. 그것은 당신의 문제를 완전히 해결할 것입니다.