React-native-router-flux: 如何使用模态

创建于 2017-08-03  ·  16评论  ·  资料来源: aksonov/react-native-router-flux

版本

  • 反应本机路由器通量 v4b15
  • 反应原生 v46

我真的在模式上苦苦挣扎,因为没有关于它们的文档,并且该示例没有关于某些场景如何以模态显示而其他场景没有的评论或指示。 这是我的代码。

<Router>
  <Scene key="root" hideNavBar hideTabBar>
    <Scene key="tabBar" tabs>
      <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
      <Scene key="favorites" component={Favorites} title="Favorites" />
      <Scene key="messages" component={Messages} title="Messages" />
      <Scene key="profile" component={Profile} title="Profile" />
    </Scene>
    <Scene key="modal" modal>
      <Scene key="map" component={Map} title="Map" hideNavBar />
    </Scene>
    <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
  </Scene>
</Router>;

我正在尝试让 Map 组件以模态方式显示。

MapButton如下:

const MapButton = () =>
  <TouchableWithoutFeedback onPress={Actions.map}>
    <Text>Map</Text>
  </TouchableWithoutFeedback>;

我必须使用它,因为 rightText 非常有问题,并且一半时间不会渲染。

最有用的评论

谢谢,这解决了这个问题。 当没有关于它的一行文档时,您如何期望我理解某些东西? 有很多人提出了关于这个模态特性的问题,也许这表明需要文档......

所有16条评论

尝试将您的root场景放在模态中。
像这样:

<Router>
    <Scene key="modal" modal>
       <Scene key="root" hideNavBar hideTabBar>
            <Scene key="tabBar" tabs>
              <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
              <Scene key="favorites" component={Favorites} title="Favorites" />
              <Scene key="messages" component={Messages} title="Messages" />
              <Scene key="profile" component={Profile} title="Profile" />
            </Scene>
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />

您应该像@luco建议的那样将根场景制作为modal 。 请检查示例项目,登录被实现为模态

这仍然行不通。

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
      </Scene>
    </Scene>
  </Router>

当我不希望其余部分(如ListingDetail)成为模态时,将所有内容包装在模态场景中会使一个特定的场景模态对我来说没有任何意义。 我需要使用Actions.map中的特定参数吗?

不幸的是,这是反应导航的问题 - 它不支持堆栈子级的不同动画。 我无法重现您的问题(代码看起来不错),这就是为什么我要求每个人都分叉和修改这个 repo 示例,如果他们希望他们的问题得到解决。 如您所见,示例中的登录模式工作正常

所以你是说没有办法支持模态 iOS 转换? 即一个从底部滑落的?

你是什​​么意思? 我说过两次,示例具有模态登录屏幕(从底部滑动)

好的,但你也说我的代码看起来不错....

我已尽力遵循示例,但由于没有文档,我无法说出所有内容的原因。 我不能只是复制和粘贴该代码,因为显然我的路线不同。

同样,我可以告诉您有关您的代码的信息-我看不到整个项目和所有详细信息。 例如,您可以使用Actions.map ,它甚至可能在编译期间不生成(并且为空)。

如果您让我知道您需要什么,我很乐意提供更多代码示例。 Actions.map有效,它只是从我期望的底部的侧面过渡进来。

你是说你不能在同一个应用程序中同时拥有pushmodal过渡?

我的天啊。 不在应用程序中,而是在一个容器中。 经过更深入的了解后,您的代码有错误 - 'map' 仍然是 'normal' 容器的子项(key=root),而不是模态(key='modal')。 看起来你不明白你在做什么。 也许这个组件对你来说太复杂了......

试试这个:

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
      </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
    </Scene>
  </Router>

谢谢,这解决了这个问题。 当没有关于它的一行文档时,您如何期望我理解某些东西? 有很多人提出了关于这个模态特性的问题,也许这表明需要文档......

最近的几篇文章是关于 JSX 语法和对导航容器的理解,而不是关于文档。
我添加了有关模态的更多信息。

你好,

为我工作

<Router navigationBarStyle={{backgroundColor: '#FF5722'}} titleStyle={{color: '#fff'}}>
        <Modal>
            <Stack key="root">
                <Scene key='login_screen' component={LoginScreen} title='login' hideNavBar={true} />
            </Stack>
            <Scene key='cadastro_screen' component={CadastroScreen} title='Cadastro' hideNavBar={false} />
        </Modal>
</Router>

当我添加模态包装器时,我会在视图顶部获得 2 个导航栏,当我添加 hideNavBar 时,它们都消失了。 我该如何解决这个问题我只想要一个标签栏而不是两个显然......?

使用<Modal hideNavBar>因为<Modal>将添加自己的导航栏,因此您最终会拥有两个与根场景中的导航栏。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

tonypeng picture tonypeng  ·  3评论

fgrs picture fgrs  ·  3评论

VictorK1902 picture VictorK1902  ·  3评论

basdvries picture basdvries  ·  3评论

xnog picture xnog  ·  3评论