尝试装载到多个RootView

itenl commented 4 years ago

首先非常感谢作者贡献此优秀的类库，想请教一下本库与react-navigation如何搭配使用，譬如有一个Toast或者Confirm的确认弹窗只在当前页（Router）显示或交互而不会在上下级页面也显示，因为我查看内部实现是依托AppRegistry.setWrapperComponentProvider注册到Root来实现的，其中版本如下。 "react-native-root-siblings": "^4.0.6", "react-navigation": "^3.11.0"

sunnylqm commented 4 years ago

你可以在需要的页面挂一个装载点 RootSiblingParent ，栈顶的装载点优先 https://github.com/magicismight/react-native-root-siblings/issues/52#issuecomment-563252331

itenl commented 4 years ago

index.js

AppRegistry.registerComponent('Home', () => RootWrap);
AppRegistry.registerComponent('Store', () => RootWrap);

app.js

RootStack.router.getStateForAction = NavigationService.getStateForActionOverride(RootStack.router.getStateForAction);
    const AppContainer = createAppContainer(RootStack);
    return (
      (!Router[this.state.app.router].authorize || !!this.state.app.token) && (
        <AppContext.Provider value={this.state}>
          <RootSiblingParent>
            <AppContainer
              onNavigationStateChange={(prevState, currentState) => {
                const currentScene = getCurrentRouteName(currentState);
                const previousScene = getCurrentRouteName(prevState);
                if (previousScene !== currentScene) {
                  if (lightContentScenes.indexOf(currentScene) >= 0) {
                    // StatusBar.setBarStyle('light-content');
                  } else {
                    // StatusBar.setBarStyle('dark-content');
                    // StatusBar.setBarStyle('default');
                  }
                }
              }}
            />
          </RootSiblingParent>
        </AppContext.Provider>
      )
    );

背景：项目的底部导航Tab是原生的，而并非RN，底部Tab有两RN页面，Home与Store，均由AppRegistry.registerComponent注册，而key则由Android通过bundle params传入注册控制打开不同的页；期望：在 Home或Store 页使用new RootSiblings(xxx)弹出的层应该在本页面，以及react-navigation路由栈里页面弹出的层不会在其他的页面显示或灵活控制，全局提醒的Toast可以跨router页或跨根级组件，但当前页交互的Confirm只会在当前页出现而不能够使其跨router页或跨根级组件；实际（3.2.1版本）：使用new RootSiblings(xxx)弹出的层在Home与Store页均显示了出来实际（4.0.6版本）：使用new RootSiblings(xxx)弹出的层有时会在Home有时会在Store，出现乱串的情况

@sunnylqm 经过尝试在 4.0.6 的版本中使用RootSiblingParent装载与否效果一致，未达到预期：在Home使用new RootSiblings(xxx)弹出的内容会在Store页面显示出来，而Store页面new RootSiblings(xxx)则还是在Store，期望的效果是在Home在弹层在Home，Store的弹层在Store，感谢回复支持；

sunnylqm commented 4 years ago

你这个问题其实跟react-navigation没啥关系了啊，这是两个rootview了，并不在同一个导航栈中 RootSiblingParent以后加载的为优先，你这两个tab如果同时存在那就是以靠后的tab为准了所以你得自己设计一个切换机制（tab切换时改变挂载点）

itenl commented 4 years ago

Tab切换机制目前看可行性不高毕竟Tab底栏是原生的，交互通信成本较高；我看下源码能否在使用挂载点RootSiblingParent时传入页面的RouteKey，在消费时通过RourKey指定去new RootSiblings，若兄台有可行性方案也请指点一二。

sunnylqm commented 4 years ago

多处挂载可以使用这个 https://github.com/magicismight/react-native-root-portal

itenl commented 4 years ago

@sunnylqm 通过使用react-native-root-portal进行多处挂载的确可以解决通过AppRegistry.registerComponent注册的页面在原生底部Tab切换中互不干扰的需求；但通过react-navigation createStackNavigator的路由是无法使用react-native-root-portal挂载，故在使用 navigation.navigate 跳转到子页面或子页面操作后返回上级页面也会出现同样的问题，目前能想到的是使用static navigationOptions来维护每个页面自身的挂载点，但还并不是最优毕竟是有页面侵入性及强约束，是否有所赐教。

sunnylqm commented 4 years ago

@itenl stack为啥要改挂载点呢，就挂在根节点有啥问题呢。如果担心跨页面后对话框仍然存在，那么首先就应该把对话框做成模态的（用一个全屏透明无点击反馈的按钮包起来），不管啥操作先把对话框解决了再说，这不是自然又简单吗

itenl commented 4 years ago

已尝试使用HOC解决，多处挂载点（react-native-root-portal）是为了确保底层的new RootSiblings出来的交互框只会在当前页面而不会跨页面；需求场景是一个支付确认的Confirm交互框，这个Confirm可在任意页面都能唤起，其次必须用户触发交互（支付、关闭）后才能销毁关闭，这与模态窗与否并没直接关联，总之非常感谢你的帮助。

AnnaSearl commented 3 years ago

我也遇到了这个问题，请问最后具体的解决方案是怎样的呢，可以分享下么

jiantao88 commented 3 years ago

同样遇到了这个问题，HOC是什么方式呢？可以分享下么

magicismight / react-native-root-siblings

尝试装载到多个RootView #60