ネイティブは本当にAndroidフラグメントをサポートしていますか？

Question

この質問は、表示されるよりも難しいです。

• ReactFragmentActivityが反応ネイティブのmasterブランチに存在するが、

• https://github.com/facebook/react-native/pull/12199/commits/e5b68717f57c41f5f1e77c289bdb4f673bb242f1 //これはまだ承認されていないが、必要性が認められた参照リアクト断片を作成するために、未解決の問題があるん。

• githubなどで数十のReact Nativeの例を見てきましたが、断片は決して表示されません。私が間違っていることを証明してください！

• これは明らかに不可能ではありません。React-native inside a Fragmentですが、この解決策はタッチイベントを十分に処理していないようです。

私の印象は、React Nativeは主にレイアウトのアクティビティ全体のルートビューを制御することです。私は、断片を取る際にいくつか注意が払われていると思います。副作用として、（React Nativeではなく）React自体が、それ自身の概念の断片を持っているようです。私はReact Nativeの中にヨガのレイアウトマネージャーさえ推測していますが、それはAndroid Fragmentsを扱いたくないからです。新しいアプリではあまり問題にはなりませんが、React Nativeを既存のアプリに統合するには、これが本当の問題です！

あなたが知らないけど知りたいのであれば、あなたの質問に投票してください！

Answer 1

私は知らないかもしれませんが、おそらく既に解決策を見つけたかもしれませんが、それは他の人にとっては役に立ちます。あなたが提供したソリューションは、ネイティブのアンドロイドFragmentActivityまたはAppCompatActivityを使用すると、実際にタッチイベントにいくつかの問題があります。しかし反応ネイティブにはReactFragmentActivityがあり、アクティビティがこのアクティビティを拡張する場合、タッチイベントはうまく機能しますが、分離されたフラグメントでのみ機能します。 ViewPagerなどでは機能しません。フラグメントが分離された活動で使用する場合にのみ、このように：

Fragment reactFragment = new MainReactFragment(); 
getSupportFragmentManager().beginTransaction().replace(R.id.fragment, reactFragment, "reactFragment").commit(); 

EDIT：

いくつかの試行錯誤の後、私はそれがViewPagerとTabLayoutとの仕事を修正するようになった（しかし、私は他のケースでそれを考えますうまくいくだろう）。だから、私がしたことがここにある。

public abstract class ReactFragment extends Fragment { 

    private ReactRootView mReactRootView; 
    private ReactInstanceManager mReactInstanceManager; 

    // This method returns the name of our top-level component to show 
    public abstract String getMainComponentName(); 

    @Override 
    public void onAttach(Context context) { 
     super.onAttach(context); 
     mReactRootView = new ReactRootView(context); 
    } 

    public void setmReactInstanceManager(ReactInstanceManager mReactInstanceManager){ 
     this.mReactInstanceManager = mReactInstanceManager; 
    } 

    @Override 
    public ReactRootView onCreateView(LayoutInflater inflater, ViewGroup group, Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     return mReactRootView; 
    } 

    @Override 
    public void onActivityCreated(Bundle savedInstanceState) { 
     super.onActivityCreated(savedInstanceState); 
     mReactRootView.startReactApplication(
       mReactInstanceManager, 
       getMainComponentName(), 
       null 
     ); 
    } 
} 

そして、私たちのフラグメントを実装します：

public class MainReactFragment extends ReactFragment { 

    @Override 
    public String getMainComponentName() { 
     return "reactProject"; 
    } 
} 

我々はReactFragmentActivityから私たちの活動を拡張し、ReactInstanceManagerを初期化する必要があります。

public class MainActivity extends ReactFragmentActivity { 

    TabLayout tabs; 
    ViewPager viewPager; 
    private ReactInstanceManager mReactInstanceManager; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.layout_main); 

     tabs = (TabLayout) findViewById(R.id.menuItemTabs); 
     viewPager = (ViewPager) findViewById(R.id.tabMainMenu); 

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

     TabsAdapter adapter = new TabsAdapter(getSupportFragmentManager(), mReactInstanceManager); 
     viewPager.setAdapter(adapter); 
     tabs.setupWithViewPager(viewPager); 

    } 

    @Override 
    public boolean onKeyUp(int keyCode, KeyEvent event) { 
     if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { 
      mReactInstanceManager.showDevOptionsDialog(); 
      return true; 
     } 
     return super.onKeyUp(keyCode, event); 
    } 

    @Override 
    public void invokeDefaultOnBackPressed() { 
     super.onBackPressed(); 
    } 

    @Override 
    public void onPause() { 
     super.onPause(); 

     if (mReactInstanceManager != null) { 
      mReactInstanceManager.onHostPause(this); 
     } 
    } 

    @Override 
    public void onResume() { 
     super.onResume(); 

     if (mReactInstanceManager != null) { 
      mReactInstanceManager.onHostResume(this, this); 
     } 
    } 

    @Override 
    public void onBackPressed() { 
     if (mReactInstanceManager != null) { 
      mReactInstanceManager.onBackPressed(); 
     } 
     else { 
      super.onBackPressed(); 
     } 
    } 
} 

そして、もちろん、TabAdapter ReactFragmentは次のようになります：

public class TabsAdapter extends FragmentStatePagerAdapter { 

    ReactInstanceManager mReactInstanceManager; 

    public TabsAdapter(FragmentManager fragmentManager, `enter code here`ReactInstanceManager reactInstanceManager){ 
     super(fragmentManager); 
     mReactInstanceManager = reactInstanceManager; 
    } 

    @Override 
    public Fragment getItem(int position) { 
     MainReactFragment reactFragment = new MainReactFragment(); 
     reactFragment.setmReactInstanceManager(mReactInstanceManager); 
     return reactFragment; 
    } 

    @Override 
    public int getCount() { 
     return 2; 
    } 

    @Override 
    public int getItemPosition(Object item) { 
     return POSITION_NONE; 
    } 

    @Override 
    public CharSequence getPageTitle(int position) { 
     return "react tab " + position; 
    } 


    @Override 
    public Parcelable saveState() { 
     return null; 
    } 
} 

結果：

、

、

、

ホープこれは誰かに役立ちます。