如何使用 react-native 创建一个原生的模态视图 segue? [英] How do I create a native looking modal view segue with react-native?

问题描述

有没有办法执行模态转场，从底部向上动画视图和导航栏，覆盖现有的导航栏，视图和标签栏等?

Is there an way to perform a modal segue, animating the view and navbar up from the bottom, covering the existing navbar, view and tabbar, etc. ?

UIExplorer 中有一个类似的例子，其中视图'Navigator' 使用 'configureScene' 通过 Navigator.SceneConfigs.FloatFromBottom 等从底部浮动视图(但不是导航栏).本机应用程序模式转场应该为新导航栏设置动画并从底部向上查看.注意:一个很好的例子是健康应用程序，点击医疗 ID"选项卡，然后点击导航栏中的编辑"按钮，并注意它的导航栏和视图如何动画和覆盖现有的导航栏、标签栏和视图.

There is a similar example in UIExplorer where the view 'Navigator' uses 'configureScene' to float a view (but not the navbar) from bottom via Navigator.SceneConfigs.FloatFromBottom, etc. Native app modal segues are supposed to animate the new navbar and view up from the bottom. Note: A good example of this is the health app, click on 'medical ID' tab, then tap on 'Edit' button in navbar, and notice how its navbar and view animates and covers the existing navbar, tabbar and view.

我可以在 facebook 群组应用程序中看到一个模态转场，根据我的理解，这是本机反应.单击组"选项卡，然后单击创建"导航栏按钮.

I can see a modal segue in the facebook groups app, which is react-native from my understanding. Clicking on the 'Groups' tab, the click on the 'create' navbar button.

有谁知道如何在 react-native 中实现原生模态转场?

Does anyone know how to implement a native modal segues in react-native?

推荐答案

this.props.navigator.push({
    title: 'Pick Date',
    sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
    component: DatePickerView,
    navigationBar: <NavigationBar
        title="Initial View"/>,
    passProps: {handleSelectedDate: this.handleSelectedDate}
})

源链接在这里:https://github.com/aaronksaunders/React-Modal-Nav-Example

这篇关于如何使用 react-native 创建一个原生的模态视图 segue?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！