2017-07-28 2 views
0

verstecken Ich baue eine CRM-App für meine Firma. Auf der Anmeldeseite ist es eine leere Kopfzeile. Nach dem Einloggen wird dem Benutzer eine Liste der Kundenaufträge angezeigt. Ich habe einen Abmeldeschalter auf der rechten Seite der Kopfzeile des Kundenauftragslistenbildschirms. Wenn ich abmelde, leite ich auf die Anmeldeseite um, aber auf der linken Seite der Kopfzeile erscheint eine Zurück-Schaltfläche mit ("Kundenbestellungen"). Ich habe versucht, den Header auf Null in meiner AppNavigator-Klasse, durch die statischen navigationOptions setzen und haben versucht, viele verschiedene Methoden, um den Header auf null setzen, aber der Header immer angezeigt wird. Es scheint, als ob die Anmeldeseite aus irgendeinem Grund keine navigationOptions erkennt. Hier ist etwas von meinem Code für Ihre Referenz .. Es ist lustig, weil die Einstellung navigationOptions auf SalesOrderList und SalesOrderItem funktioniert perfekt, aber die Kopfzeile auf Login.js will immer aus irgendeinem Grund sichtbar sein .... kann es nicht herausfinden! !! Hilfe! Ich habe versucht {header: null}, {headerLeft: null}, {headerVisible: false}, {header {left: null}}, {header {visible: false}} und Gott weiß was noch ...Header kann nicht auf dem Anmeldebildschirm in reaktiven nativen

AppNavigator.js

const routeConfiguration = { 
     App: { screen: App }, 
     Login: { screen: Login }, 
     SalesOrderList : { screen: SalesOrderList },  
     SalesOrderItem : { screen: SalesOrderItem }, 
    }; 

    const stackNavigatorConfiguration = { 
     initialRouteName: 'App', 
     headerMode: 'screen' 
    } 

    export default AppNavigator = StackNavigator(routeConfiguration,stackNavigatorConfiguration) 

    AppRegistry.registerComponent('crm',() => AppNavigator); 

Login.js

export default class Login extends Component { 
     constructor(props){ 
      super(props); 
     } 
     state = { 
      email: '', 
      password: '', 
      error: '', 
      loading: false, 
      loggedIn: null 
     }; 

     onButtonPress() { 
      const { email, password } = this.state; 
      this.setState({ 
       email: email.toString(), 
       password: password.toString(), 
       error: '', 
       loading: true, 
       loggedIn: false 
      }); 
      console.log('Logins navigationOptions'); 
      console.log(Login.navigationOptions); 
      this.onAuthSuccess(); 
      const auth0 = new Auth0({ domain: 'crm.auth0.com', clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX' }); 
      // auth0 
      //  .auth 
      //  .passwordRealm({username: {email}, password: {password}, realm: "urn:auth0:crm"}) 
      //  .then(authResult => 
      //   console.log(authResult) 
      // ) 
      //  .catch(error => 
      //   console.error(error) 
      // ) 
     } 

     onAuthSuccess() { 
      const { navigate } = this.props.navigation; 
      this.setState({ 
       loading: false, 
       loggedIn: true 
      }); 
      this.props.updateAppState({loggedIn: true}); 
      console.log(this.props.navigation); 
      navigate('SalesOrderList', {updateAppState: this.props.updateAppState}); 
     } 

     onAuthFailed() { 
      this.setState({ 
       error: 'Authentication Failed', 
       loading: false, 
       loggedIn: false 
      }); 
      this.props.updateAppState({loggedIn: false}); 
      this.props.navigation.navigate('App'); 
     } 

     static navigationOptions = { headerLeft: null, }; 

     render() { 
      const { navigate } = this.props.navigation; 
      const { form, fieldStyles, loginButtonArea, errorMessage, welcome, container } = styles; 
      return (
      <View style={styles.container}> 
       <Text style = {styles.labelText} >Login to ISSI CRM</Text> 
       <MKTextField 
        text={this.state.email} 
        onTextChange={email => this.setState({ email })} 
        textInputStyle={fieldStyles} 
        placeholder={'Email...'} 
        tintColor={MKColor.Teal} 
       /> 
       <MKTextField 
        text={this.state.password} 
        onTextChange={password => this.setState({ password })} 
        textInputStyle={fieldStyles} 
        placeholder={'Password...'} 
        tintColor={MKColor.Teal} 
        password={true} 
       /> 
       <Text style={errorMessage}> 
        {this.state.error} 
       </Text> 
       <View style={loginButtonArea}> 
        <LoginButton onPress={this.onButtonPress.bind(this)} /> 
       </View> 
      </View> 
      ); 
     } 
    } 

Antwort

0

versuchen Sie die folgenden in Ihrem stackNavigatorConfiguration

headerMode: 'none',
mit

0

Ich fand den Grund warum. Das liegt daran, dass ich zur App umadressiere, die dann zur Anmeldung weiterleitet ... indem ich headerLeft: null auf App.js setze, kann ich die Zurück-Schaltfläche ausblenden. Es ist witzig, dass Sie die navigationOptions bei der Anmeldung zwar nicht auf Login umleiten können.

Verwandte Themen