reactNative中的导航页面

reactNative中的导航页面

          reactNative中实现导航页面显示3秒后消失。

         

          reactNative中实现导航页面比android原生实现稍微麻烦

          需要涉及到reactNative JS DOM和原生android的交互

         实现思路：

         1.Android原生中实现Dialog的关闭和开启 的reactNative Moudle

         2.Android启动时在mainActity中开启Dialog

         3.Android启动后进入主页面，reactNative JS DOM 调用原生moudle 关闭Dialog

        我们实现导航页面显示3秒后消失需要引用第三方reactnative插件、Dialog的关闭和开启Android、IOS第三方插件

        具体实现思路和上面说到的实现思路一致。

 

        引用插件步奏

        npm install react-native-splash-screen --save   //Dialog的关闭和开启第三方插件

        react-native link react-native-splash-screen        //通过rn导入安卓ios依赖包

        实现思路图：

      

     实现代码：

    android部分：

    reactNativeModule

    SplashScreenModule.java:

public class SplashScreenModule extends ReactContextBaseJavaModule{    public SplashScreenModule(ReactApplicationContext reactContext) {        super(reactContext);    }    @Override    public String getName() {        return "SplashScreen";    }    /**     * 打开启动屏     */    @ReactMethod    public void show() {        SplashScreen.show(getCurrentActivity());    }    /**     * 关闭启动屏     */    @ReactMethod    public void hide() {        SplashScreen.hide(getCurrentActivity());    }}

     Dialog开启和关闭：

     SplashScreen.java:

public class SplashScreen {    private static Dialog mSplashDialog;    private static WeakReference<Activity> mActivity;    /**     * 打开启动屏     */    public static void show(final Activity activity,final boolean fullScreen) {        if (activity == null) return;        mActivity = new WeakReference<Activity>(activity);        activity.runOnUiThread(new Runnable() {            @Override            public void run() {                if (!activity.isFinishing()) {                    mSplashDialog = new Dialog(activity,fullScreen? R.style.SplashScreen_Fullscreen:R.style.SplashScreen_SplashTheme);                    mSplashDialog.setContentView(R.layout.launch_screen);                    mSplashDialog.setCancelable(false);                    if (!mSplashDialog.isShowing()) {                        mSplashDialog.show();                    }                }            }        });    }    /**     * 打开启动屏     */    public static void show(final Activity activity) {        show(activity,false);    }    /**     * 关闭启动屏     */    public static void hide(Activity activity) {        if (activity == null) activity = mActivity.get();        if (activity == null) return;        //让该Active的主线程关闭Dialog        activity.runOnUiThread(new Runnable() {            @Override            public void run() {                if (mSplashDialog != null && mSplashDialog.isShowing()) {                    mSplashDialog.dismiss();                }            }        });    }}

        将Dialog moudle方法 moudle包中：

       SplashScreenReactPackage.java:

public class SplashScreenReactPackage implements ReactPackage {    @Override    public List<Class<? extends JavaScriptModule>> createJSModules() {        return Collections.emptyList();    }    @Override    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }    @Override    public List<NativeModule> createNativeModules(            ReactApplicationContext reactContext) {        List<NativeModule> modules = new ArrayList<>();        modules.add(new SplashScreenModule(reactContext));        return modules;    }}

     MainApplication中添加mudle包：

     MainApplication.java:

public class MainApplication extends Application implements ReactApplication {  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {    @Override    public boolean getUseDeveloperSupport() {      return BuildConfig.DEBUG;    }    @Override    protected List<ReactPackage> getPackages() {      return Arrays.<ReactPackage>asList(          new MainReactPackage(),              new SplashScreenReactPackage()      );    }  };  @Override  public ReactNativeHost getReactNativeHost() {    return mReactNativeHost;  }  @Override  public void onCreate() {    super.onCreate();    SoLoader.init(this, /* native exopackage */ false);  }}

     MainActity中开启Dialog:

     MainActity.java:

public class MainActivity extends ReactActivity {    /**     * Returns the name of the main component registered from JavaScript.     * This is used to schedule rendering of the component.     */    @Override    protected String getMainComponentName() {        return "reactnativedemo";    }     @Override     protected void onCreate(Bundle savedInstanceState) {         //先显示欢迎界面         SplashScreen.show(this);         super.onCreate(savedInstanceState);     }}

      ReactNative  JS部分：

     HomePage.js:

 componentDidMount(){        //关闭欢迎页面        SplashScreen.hide();        //添加事件监听        this.listener=DeviceEventEmitter.addListener('HOMEPAGE_RELOAD',(n)=>{            //主页重新加载            //跳转到新的场景，并且重置整个路由栈            this.props.navigator.resetTo({               component:HomePage            });            JasonToast.show("123HOMEPAGE_RELOAD",JasonToast.LONG);        });    }