react-native-navigation的迁移库

top-level-api.md 4.1KB

Top Level API Migration

In order to make navigation API homogenous as much as possible, we provide setRoot function that receives layout of any kind. See Layout types

setRoot(layout)

Navigation.setRoot({
  bottomTabs: {
    children: [{
      stack: {
        children: [{
          component: {
            name: 'example.FirstTabScreen',
            passProps: {
              text: 'This is tab 1'
            }
          }
        }],
        options: {
          bottomTab: {
            title: 'Tab 1',
            icon: require('../images/one.png'),
            testID: 'FIRST_TAB_BAR_BUTTON'
          }
        }
      }
    },
    {
      component: {
        name: 'navigation.playground.TextScreen',
        passProps: {
          text: 'This is tab 2'
        },
        options: {
          bottomTab: {
            title: 'Tab 2',
            icon: require('../images/two.png'),
            testID: 'SECOND_TAB_BAR_BUTTON'
          }
        }
      }
    }]
  }
});

startSingleScreenApp(params) -> setRoot({stack})

Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar

Navigation.setRoot({
  stack: {
    children: [{
      component: {
        name: 'example.WelcomeScreen',
        passProps: {
          text: 'stack with one child'
        }
      }
    }],
    options: {
      topBar: {
        title: {
          text: 'Welcome screen'
        }
      }
    }
  }
});

showModal(params = {}) -> showModal(layout = {})

Show a screen as a modal.

Navigation.showModal({
  stack: {
    children: [{
      component: {
        name: 'example.ModalScreen',
        passProps: {
          text: 'stack with one child'
        },
        options: {
          topBar: {
            title: {
              text: 'Modal with stack'
            }
          }
        }
      }
    }]
  }
});

dismissModal(params = {}) -> dismissModal(componentId)

Dismiss the current modal.

Navigation.dismissModal(this.props.componentId);

dismissAllModals(params = {}) -> dismissAllModals()

Dismiss all the current modals at the same time.

Navigation.dismissAllModals();