Wie mache ich ein TabNavigator-Taste a drücken modal-Bildschirm mit Navigation Reagieren

Verwendung Reagieren die Registerkarte "Navigation" navigator https://reactnavigation.org/docs/navigators/tab wie mache ich einer der tab-Tasten schieben Sie den Bildschirm als Vollbild modal? Ich sehe die Stapel navigator hat eine mode=modal option. wie bekomme ich diesen Modus verwendet werden, wenn Sie auf den TakePhoto tab-Taste? Klick auf die es derzeit noch zeigt der tab-Leiste auf der Unterseite.

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen, //how can I have this screen show up as a full screen modal?
  },
});

Wie haben Sie das gelöst? Ich habe versucht, um es herauszufinden, für eine Weile

InformationsquelleAutor MonkeyBonkey | 2017-02-22

react-native react-navigation

21

Tatsächlich, es gibt keine Unterstützung in reagieren-navigation verändern die Art und Weise der Präsentation on-the-fly aus default zu modal (siehe die Diskussion über diese hier). Ich lief in das gleiche Problem und löste es mit einem sehr top StackNavigator mit headerMode eingestellt none und mode eingestellt modal:
```
const MainTabNavigator = TabNavigator(
    {
        Tab1Home: { screen: Tab1Screen },
        Tab2Home: { screen: Tab2Screen }
    }
);

const LoginRegisterStackNavigator = StackNavigator({
    Login: { screen: LoginScreen }
});

const ModalStackNavigator = StackNavigator({
    MainTabNavigator:          { screen: MainTabNavigator            },
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator }
}, {
    headerMode: 'none',
    mode:       'modal'
});
```
Das erlaubt mir, Folgendes zu tun (mit redux) in Tab1Screen und Tab2Screen zu bringen, bis das modale Ansicht aus, wo immer ich will:
```
this.props.navigation.navigate('LoginScreenStackNavigator');
```
- Können Sie diesen Aufruf.Requisiten aus dem inneren eines tab-Taste? Wie?
- Du meinst, von einem Bildschirm innerhalb eines tab-oder der tab-Taste selbst? "leider" war ich mit redux also ich glaube, ich habe einen anderen Fall 🙂
- Ich benutze auch redux. Aber ich kann nicht ein Ereignis ausgelöst, um öffnen Sie das popup, modal-oder rufen Sie die Requisiten in der Haupt-navigator-stack, wo der nav-Konfiguration ist.
- Hi. Ich werde tun, wie oben code zu ändern tab1 zu tab2. seine arbeiten gut, aber ich möchte zu aktualisieren, die in tab2. Wie seine möglichen Registerkarte ändern auf "Ansicht aktualisieren". wegen seines Lebenszyklus nicht nennen.
- Danke @ThomasKekeisen Dies funktionierte gut für mich! Eine Sache zu beachten: wenn Sie möchten, eine nav-header erscheinen in der LoginScreenStackNavigator, müssen Sie Ihren headerMode auf den Bildschirm Ihre Optionen, sonst wird es Erben, die kein Wert von seinem äußeren geschachtelten nav.
- Vielen Dank, es funktioniert, nur Nachteil ist, wenn es transparent ist, können Sie nicht sehen, ein anderer Bildschirm unter, weil es ein navigator insgesamt... 🙁 ich lese in Ihren github-Fragen, Sie sagte es ist momentan unmöglich, mit nur reagieren-navigation. Bin ich hier etwas fehlt?
- Ich mag diese Lösung
InformationsquelleAutor Thomas Kekeisen
10

Nicht sicher, ob dies noch relevant ist für dich, aber ich habe es geschafft, und Sie finden einen Weg, dies zu erreichen.

So, ich habe es geschafft, es funktioniert durch die Verwendung der tabBarComponent innerhalb der tabNavigatorConifg, können Sie die tab-navigation aus Navigation je nach index.
```
   tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
        <TabBarBottom
            {...props}
            jumpToIndex={index => {
                if (index === 2) {
                    navigation.navigate('camera')
                }
                else {
                    jumpToIndex(index)
                }
            }}
        />

    )
```
Sobald Sie dies getan haben, meine Methode zu zeigen, die Ansicht Modal auf der Oberseite des tab-Blick auf zu setzen der tabnavigator-Containers innerhalb eines stacknavigatior und dann einfach navigieren Sie zu einem neuen Bildschirm im inneren des stacknavigator.
- Ich dont bekommen, diesen Teil "Sobald Sie dies getan haben, meine Methode zu zeigen, die Ansicht Modal auf der Oberseite des tab-Blick auf zu setzen der tabnavigator-Containers innerhalb eines stacknavigatior und dann einfach navigieren Sie zu einem neuen Bildschirm im inneren des stacknavigator." Sollten Sie dann nicht auch die stack-navigator innerhalb der Registerkarte nicht außerhalb?
- Dank der Thomas und TomTom, eine Kombination der beiden Lösungen funktioniert wie ein Charme für mich (auch ohne Redux).
InformationsquelleAutor TomTom
1

Einen Weg, um die tab-Leiste Weg gehen, ist das verstecken der tabBar mit visible: false:
```
const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen,
    navigationOptions: {
      tabBar: {
        visible: false,
      },
    },
  },
});
```
Aber das scheint nicht zu auslösen, die den übergang zum Vollbild, was ich denke, ist gewünscht?

Weitere option könnte sein, wrap PhotoPickerScreen in einer neuen StackNavigator, und dann den navigator-Modus='modal'.

Müssen Sie möglicherweise auslösen der navigation zu, dass modale von onPress auf das tabItem irgendwie (zB. navigation.navigate('TakePhoto').)

Hinweis, ich werde versuchen, wickeln Sie meinen Kopf herum, wie am besten, um die Struktur der navigation selbst, so ...

Dritte Möglichkeit, die Umsetzung einer StackNavigator als Elternteil dann hinzufügen die MyApp TabNavigator als die erste route in der es, könnte die flexibelste Lösung. Dann die TakePhoto Bildschirm wäre auf der gleichen Ebene wie der TabNavigator-Container, so dass Sie route, um es von überall.

Daran interessiert zu hören, was Sie mit kommen!
- Ja, ich bin noch immer Probleme mit mir selbst - hat Sie einen Weg finden, ein onPress Ereignis auf der Registerkarte Element selbst? Ich sehe keinen Weg, um abzufangen, dass die tab-Taste drücken.
InformationsquelleAutor Björn

react-navigation's bottomTabNavigator hat eine tabBarOnPress navigation option, die Sie verwenden können, um die Registerkarte überschreiben Pressen:

https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress

const AppContainer = createStackNavigator(
  {
    default: createBottomTabNavigator(
      {
        TAB_0: Stack0,
        TAB_1: Stack1,
        TAB_2: Stack2,
        TAB_3: View //plain rn-view, or any old unused screen
      },
      {
        defaultNavigationOptions: {
          //other tab navigation options...
          tabBarOnPress: ({ navigation, defaultHandler }) => {
            if (navigation.state.key === 'TAB_3') {
              navigation.navigate('tabToOpenAsModal');
            } else {
              defaultHandler();
            }
          }
        }
      }
    ),
    tabToOpenAsModal: {
      screen: TabToOpenAsModalScreen
    }
  },
  {
    mode: 'modal',
    headerMode: 'none'
  }
);

Wenn Sie Ihr nest Registerkarte navigator innerhalb eines stack-navigator mit einer modalen, können Sie öffnen Sie diese, wenn Sie die tab-bar-Taste gedrückt wird. Da der modal geöffnet wurde und nicht der Reiter, wenn das modal geschlossen ist, die app zurück zu dem Bildschirm, der angezeigt wurde, bevor das modale Fenster wurde gedrückt.

InformationsquelleAutor cjpete

-1

Docs sind lückenhaft, in einigen Bereichen, aber hier ist es:
```
    export default class HomeScene extends Component {

        static navigationOptions = {
        title: 'foo',
        header:{
                    visible: true
                }
        }
        ....
      }
```
- Wie sieht Ihre Antwort zur Frage passen, der Thread opener?
- Sieht aus wie klebte ich völlig den falschen code für diese Antwort. Mein schlechtes. Muss gemeint haben, beantworten Sie eine diff-Frage woanders
InformationsquelleAutor PHPGuyZim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.