Question

我正在尝试在活动切换时应用一些过渡动画。但是，下一个活动的内容始终仅在动画完成后显示，这会在切换到下一个活动时导致白色闪烁。

如果我使用Android布局作为下一个Activity的内容，则此问题不存在，因此，由于React-Native，这显然是一个问题。

以下是RouterModule。当JS代码需要切换到另一个活动时，它只需调用push方法，此模块将调用startActivity()和overridePendingTransition()来自定义动画：

RouterModule

public class RouterModule extends ReactContextBaseJavaModule {

    public RouterModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "RouterModule";
    }

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<String, Object>();
        return constants;
    }

    @ReactMethod
    public void push(String uri, @Nullable ReadableMap config, String transition) {
        Uri intentData = Uri.parse(uri);
        Intent pageIntent = RedirectActivity.getPageIntentFromUri(intentData);

        MyReactNativeApplication.CURRENT_VIEW_CONTEXT.startActivity(pageIntent);
        switch(transition){
            case "leftToRight":                      
                MyReactNativeApplication.CURRENT_VIEW_CONTEXT.overridePendingTransition(R.anim.right_to_left_in, R.anim.right_to_left_out);               
                break;
            default:
                MyReactNativeApplication.CURRENT_VIEW_CONTEXT.overridePendingTransition(0, 0);
                break;
    }
}

    @ReactMethod
    public void pop(@Nullable ReadableMap config, String transition) {
        final AppCompatActivity currentContext = CoinReactNativeApplication.CURRENT_VIEW_CONTEXT;
        currentContext.finish();

        switch(transition){
            case "rightToLeft":
                currentContext.overridePendingTransition(R.anim.left_to_right_in,  R.anim.left_to_right_out);
                break;
            default:
                break;
        }
    }    
}

以下是PageActivity。 React-Native JS代码使用的每个页面实际上都是在此活动上呈现的。

PageActivity

public class PageActivity extends AppCompatActivity {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private ReactContext mReactContext;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = getIntent();
        Bundle config = parseIntent(intent);

        String uriString = (String) config.get("uriString");
        Bundle initProps = (Bundle) config.get("config");

        NavigatorHelper.handleNavbar(this, config);
        render(uriString, config, initProps);
    }

    private void render(String uriString, Bundle config, Bundle initProps) {

        mReactInstanceManager = MyReactNativeApplication.getApplication().getReactInstanceManager();
        mReactRootView = new ReactRootView(this);
        mReactRootView.startReactApplication(mReactInstanceManager, uriString, initProps);

        setContentView(mReactRootView);

        mReactContext = mReactInstanceManager.getCurrentReactContext();
    }    
}

以下gif是我的应用程序的实际屏幕截图。我故意延长了动画的持续时间。您可以看到在动画完成之前不会显示内容（列表）。

如何在动画的边缘显示内容？就像原生Android应用程序中的那些一样？

React-Native Android活动内容仅在过渡动画完成后显示

0 个答案: