Question

我正在为我的公司构建一个CRM应用程序。在登录页面上，它是一个空标题。登录后，将显示用户的销售订单列表。我在销售订单列表屏幕的标题右侧有一个注销按钮。当我按下注销时，我会重定向到“登录”页面，但是在标题的左侧，它会显示一个带有（“销售订单”）标签的后退按钮。我已经尝试通过静态navigationOptions在我的AppNavigator类中将标头设置为null，并尝试了许多不同的方法将标头设置为null但标头始终显示。由于某种原因，似乎登录页面无法识别navigationOptions。以下是我的一些代码供您参考..这很有趣，因为在SalesOrderList和SalesOrderItem上设置navigationOptions非常有效，但是Login.js上的标题总是希望因某种原因而可见....无法弄明白！！救命！我试过{header：null}，{headerLeft：null}，{headerVisible：false}，{header {left：null}}，{header {visible：false}}，上帝知道还有什么...

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>
            );
        }
    }

Answer 1

尝试在stackNavigatorConfiguration

中使用以下内容

＆＃13;

headerMode: 'none',

＆＃13;

Answer 2

我找到了原因。这是因为我重定向到App，然后重定向到Login ...通过在App.js上设置headerLeft：null，我能够隐藏后退按钮。有趣的是，即使重定向到登录，您也无法在登录时设置navigationOptions。

反应原生

2 个答案: