it-swarm.com.de

Verwenden der navigation.navigate in einem createMaterialTopTabNavigator

Ich habe ein bisschen mit Reactor-Native angefangen, und ich versuche, eine "Hallo Word" -App zu erstellen, um zu sehen, wie es funktioniert. Ich habe ein Menü mit "Tab" am oberen Bildschirmrand erstellt

In der app.js füge ich den createStackNavigator hinzu, um meine Routen festzulegen App.js

import { ... }
const AppNavigator = createStackNavigator({     
    Main: { screen: Main},
    CScreen: {screen: FormCScreen},
});

type Props = {};
export default class App extends Component<Props> {
render() {
    return (
        <AppNavigator />    
    );
  }
}

Dies ist mein main -Bildschirm, auf dem ich die Registerkarten einstellen kann.

Main.js

imports {AScreen, BScreen} ...
const Tab = createMaterialTopTabNavigator(
{
   A: AScreen,
   B: BScreen,
},
{
  tabBarPosition: 'top',

});

export default class Main extends Component {

render() {
    return (  
      <Tab/>
    );
  }
}

BScreen.js

Nun möchte ich auf einer meiner BScreen-Registerkarten auf eine Schaltfläche klicken, von der ich hoffe, dass sie den Bildschirm lädt (CScreen).

imports ...
export default class BScreenextends Component{

    render(){
        return(
            <View>
               <TouchableHighlight onPress={() => this.props.navigation.navigate('CScreen')}>
                <Text>Click here to open CScreen</Text>
                   </TouchableHighlight>
            </View>
        );
    }
}

Es kann alle Komponenten korrekt rendern, das einzige Problem ist, dass nichts passiert, wenn ich auf die Schaltfläche klicke, um den CScreen anzuzeigen. Es ist, als würde das Laden des Tabs die Instacia meines Navigators verlieren.

Main
 Tab 
 A
 B Button (Open CScreen) ~> this is not working

Wie kann ich den Bildschirm über eine Schaltfläche in einer Registerkarte öffnen?

[EDIT] Console.log ScreenB

https://imgur.com/a/teAzpn5

7
Emiry Mirella

Ich denke, dass Sie versuchen, den StacksOverTabs-Modus für die Navigation einzurichten.

Der Fehler, den Sie gemacht haben, ist Main, wobei es sich um eine normale Komponente handelt, in der Sie die Registerkomponente, dh createMaterialTopTabNavigator, gerendert haben. Daher erhält die Registerkartenkomponente nicht die korrekte Navigationshilfe vom StackNavigator

Stattdessen müssen Sie Main screen zu einem createMaterialTopTabNavigator machen.

Zum Beispiel,

 const AppNavigator = createStackNavigator({     
     Main: { screen: MainTab}, // MainTab is itself a TabNavigator now
     CScreen: {screen: FormCScreen},
 });

 const MainTab = createMaterialTopTabNavigator(
   {
      A: AScreen,
      B: BScreen,
   },
   {
     tabBarPosition: 'top',

   });
 );

Schauen Sie sich den offiziellen Beispielcode in GitHub an, und navigieren Sie zu StacksOverTabs

https://github.com/react-navigation/react-navigation/tree/master/examples/NavigationPlayground/js

Vielen Dank.

4
Ravi Raj

Sie hätten dies auch an die Spitze Ihrer App-Klasse setzen können, glaube ich:

static router = AppNavigator.router;

Weitere Informationen finden Sie hier: https://reactnavigation.org/docs/de/common-mistakes.html#explicitlyrendering-more-than-one-navigator

1
Varun Singh