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

        });
    }