1.
Applications
实现 ReactApplication
的抽象方法 getReactNativeHost,加载jsx资源
。
package com.silabs.reactnativeappdemos; import android.app.Application; import com.facebook.react.ReactApplication; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.silabs.reactnativeappdemos.Manager.AppReactPackage; import java.util.Arrays; import java.util.List; /** * Created by chenjialin on 17/2/16. */ public class MyApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { // return BuildConfig.DEBUG; return false; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new AppReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } }
2.ReactFragment
继承Fragment类
,
它们在 Fragment
的 onAttach
方法中获取ReactRootView和ReactInstanceManager,并在 onCreateView
方法中返回该 ReactRootView
在 onActivityCreated
方法中即可使用我们的 React Native 组件,这里需要子类实现 getMainPageName
抽象方法,获取到对应的 React Native 组件。
package ReactNative; import android.content.Context; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.ViewGroup; import com.blestech.application.Applications; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactRootView; /** * Created by chenjialin on 17/3/13. */ 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); mReactInstanceManager = ((Applications) getActivity().getApplication()) .getReactNativeHost() .getReactInstanceManager(); } @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 ); } }
3.在 Fragment 中使用 React Native
package com.blestech.me; import android.support.v7.widget.Toolbar; import ReactNative.ReactFragment; /** * Created by chenjialin on 16/12/6. */ public class MeActivity extends ReactFragment { private Toolbar mToolbar; // // public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { // View view = inflater.inflate(R.layout.device_activity, container, false); // // mToolbar = (Toolbar) view.findViewById(R.id.toolbar); // // // mToolbar.setTitle(""); // ((AppCompatActivity) getActivity()).setSupportActionBar(mToolbar); // mToolbar.setBackgroundResource(R.color.navigation); // // TextView tv = (TextView) mToolbar.findViewById(R.id.title_sub); // // // tv.setText("我的"); // return view; // } @Override public String getMainComponentName() { return "hellowrd"; // name of our React Native component we've registered } }