Question

最初在第一个屏幕上

const appLaunchedListener = Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
       component: {
          name: 'StartScreen',
       }
    }
  });
});

然后，使用Navigation.push(...)到新页面，从现在开始，我要开始使用bottomTabs。
我已经在NewScreen尝试过：

Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            children: [{
              component: {
                name: 'NewScreen',
              },
            }],
            options: {
              bottomTab: {
                text: 'NEW',
                icon: {
                  scale: 15,
                  uri: 'new_grey'
                },
                selectedIcon: {
                  scale: 15,
                  uri: 'new_gold'
                },
              }
            },
          },
        },
        {
          stack: {
            children: [{
              component: {
                name: 'NotificationScreen',
              },
            }],
            options: {
              bottomTab: {
                text: 'NOTIFICATION',
                icon: {
                  scale: 15,
                  uri: 'notification_grey'
                },
                selectedIcon: {
                  scale: 15,
                  uri: 'notification_gold'
                },
              }
            },
          },
        },
      ]
    }
  }
});

使用我的代码，底部选项卡不会出现。
我怎么能达到预期的结果？在V1中，我只能使用以下处理程序：startSingleScreenApp(...)和startTabBasedApp(...)

Answer 1

提供的代码已经可以正常工作。问题在于将代码放在何处。

您可以在任何屏幕上再次调用Navigation.setRoot(...)，但是它应该在导出的类中。
像这样：

...

export default class NewScreen {
  constructor(props) {
    super(props);
  }

  startTabScreen = () => {
    const tabs = [{ ... }];

    Navigation.setRoot({
      root: {
        bottomTabs: {
          children: tabs
        }
      }
    });
  }

  componentDidMount() {
    this.startTabScreen();
  }

  ...

}

wix / react-native-navigation V2 |第二个屏幕中的setRoot bottomTabs

1 个答案: