2017-05-05 5 views
10

यह प्रश्न प्रकट होने से उत्तर देने में कठिन है।प्रतिक्रिया वास्तव में एंड्रॉइड फ्रैगमेंट का समर्थन करता है?

  • ReactFragmentActivity मूल निवासी प्रतिक्रिया के मालिक शाखा में मौजूद है, लेकिन

  • बनाने के लिए एक प्रतिक्रिया टुकड़ा देख https://github.com/facebook/react-native/pull/12199/commits/e5b68717f57c41f5f1e77c289bdb4f673bb242f1 // यह अभी तक अनुमोदित नहीं किया गया एक खुला मुद्दा नहीं है, लेकिन जरूरत स्वीकार किया गया था ।

  • मैंने जिथूब आदि पर प्रतिक्रियात्मक उदाहरणों के दर्जनों दर्जनों को देखा है, और टुकड़े कभी नहीं दिखाए जाते हैं। कृपया मुझे गलत साबित करें!

  • यह स्पष्ट रूप से असंभव नहीं है: React-native inside a Fragment लेकिन यह समाधान स्पर्श घटनाओं से पूरी तरह से निपटने के लिए प्रतीत नहीं होता है।

मेरी धारणा यह है कि प्रतिक्रिया मूल मुख्य रूप से लेआउट के लिए पूरी गतिविधि के मूल दृश्य को नियंत्रित करने के लिए केंद्रित है। मुझे लगता है कि टुकड़ों को लेने में कुछ सावधानी बरत रही है। एक साइड नोट के रूप में खुद प्रतिक्रिया (मूल प्रतिक्रिया नहीं) ऐसा लगता है कि यह एक टुकड़े की अपनी अवधारणा है। मैं रिएक्ट नेटिव लचीली के अंदर भी योग लेआउट मैनेजर का अनुमान लगा रहा हूं क्योंकि यह एंड्रॉइड फ्रैगमेंट्स से निपटना नहीं चाहता है। नए ऐप्स के लिए कोई समस्या नहीं है लेकिन मौजूदा ऐप्स में प्रतिक्रिया मूल को एकीकृत करने के लिए यह वास्तविक समस्या है!

और हाँ यदि आप नहीं जानते हैं लेकिन जानना चाहते हैं तो कृपया सवाल उठाएं!

उत्तर

-1

मुझे नहीं पता, शायद आपको पहले ही समाधान मिल गया है, लेकिन यह किसी और के लिए सहायक हो सकता है। जब आप देशी एंड्रॉइड FragmentActivity या AppCompatActivity का उपयोग करते हैं, तो आपके द्वारा प्रदान किया गया समाधान वास्तव में स्पर्श ईवेंट के साथ कुछ समस्याएं हैं। लेकिन प्रतिक्रिया-मूल के पास ReactFragmentActivity है और यदि आपकी गतिविधि इस गतिविधि को बढ़ाती है, तो स्पर्श घटनाएं अच्छी तरह से काम करती हैं, लेकिन केवल अलग टुकड़े में। यह ViewPager और दूसरों के साथ काम नहीं करता है। टुकड़ा अलग गतिविधि में उपयोग करता है सिर्फ अगर इस तरह,:

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

संपादित करें:

कुछ परीक्षणों और त्रुटियों के बाद, मैं ViewPager और TabLayout (साथ काम सही करने के लिए मिल गया है, लेकिन मैं अन्य मामलों में लगता है कि यह साथ ही काम करेगा)। तो, मैंने यही किया है।ReactFragment इस तरह दिखता है:, TabAdapter ज़ाहिर है,

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

और:

public class MainReactFragment extends ReactFragment { 

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

हम ReactFragmentActivity से हमारे गतिविधि का विस्तार करने और प्रारंभ ReactInstanceManager की जरूरत है:

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

परिणाम:

enter image description here,

enter image description here,

enter image description here,

enter image description here

आशा, इस किसी की मदद करेंगे।

संबंधित मुद्दे