React Native是否真的支持Android碎片?

这个问题比看起来更难回答。

我的印象是,React Native主要集中在控制布局整个活动的根视图上。 我认为在使用碎片时有一些警惕。 作为一个侧面说明React本身(不是React Native)似乎有自己的片段概念。 我甚至猜测,甚至React Native内部的瑜伽布局pipe理器也不会处理Android碎片。 对于新应用程序来说,这不是一个问题,而是将React Native集成到现有的应用程序中,这是真正的问题!

是的,如果你不知道,但想知道请投票的问题!

Solutions Collecting From Web of "React Native是否真的支持Android碎片?"

我不知道,也许你已经find了解决办法,但是可以帮助别人。 当你使用原生的android FragmentActivityAppCompatActivity时候,你提供的解决scheme确实有一些touch事件的问题。 但是react-native拥有自己的ReactFragmentActivity ,如果您的活动扩展了这个活动,那么触摸事件就可以正常工作,但只能在分离的片段中使用。 它不适用于ViewPager和其他人。 只有在分开的Activity中使用片段时,如下所示:

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

编辑:

经过一些试验和错误,我得到了正确的工作与ViewPager和TabLayout(但我认为在其他情况下,它也会工作)。所以,这就是我所做的。 ReactFragment如下所示:

 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:

 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; } } 

结果:

在这里输入图像说明

在这里输入图像说明

在这里输入图像说明

在这里输入图像说明

希望这会帮助别人。