React-Native: как проверить, какая страница / маршрут используется для обработки условия if

Question

Я довольно новый в реактивном родном мире ... Я хотел знать, как передать свойства, чтобы проверить, с какого пути / страницы прибывает. Мне это нужно, потому что я хотел бы поставить флажок (если) на экране, чтобы сохранить логотип в верхней половине страницы и редактировать только форму.

Login.js (базовая страница)

export default class Login extends React.Component {
static navigationOptions = {
    header: null
}
render() {
    alert(JSON.stringify(this.props));
    return (
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <View style={styles.logoContainer}>
                    <Image
                        style={styles.logo}
                        source={require('../../images/XXX.png')}/>
                </View>
                <View style={styles.formContainer}>
                    <LoginForm navigation={this.props.navigation}/>
                </View>
        </KeyboardAvoidingView>
    );
    }
}

loginForm.js

export default class LoginForm extends React.Component {
static navigationOptions = {
    header: null
}
render() {
    return (
        <View style={styles.container}>
            <TextInput
                placeholder="Username or email"
                placeholderTextColor="rgba(255,255,255,0.7)"
                underlineColorAndroid='rgba(0,0,0,0)'
                returnKeyType="next"
                onSubmitEditing={() => this.passwordInput.focus()}
                keyboardType="email-address"
                autoCapitalize="none"
                autoCorrect={false}
                style={styles.input}
            />
            <TextInput
                placeholder="Password"
                placeholderTextColor="rgba(255,255,255,0.7)"
                underlineColorAndroid='rgba(0,0,0,0)'
                secureTextEntry
                returnKeyType="go"
                autoCapitalize="none"
                style={styles.input}
                ref={(input) => this.passwordInput = input}
            />

            <Icon.Button style={styles.buttonContainer} name="user-circle" justifyContent="center">LOGIN
            </Icon.Button>

            <TouchableOpacity
                activeOpacity={.5}
                onPress={() => this.props.navigation.navigate('ForgetPassword')}
            >
                <Text style={[styles.forgetPassword]}>Forget Password?</Text>
            </TouchableOpacity>
        </View>
    );
  }
}

forgetPassword.js

export default class ForgetPassword extends React.Component {
static navigationOptions = {
    header: null
}

render() {
    alert(JSON.stringify(this.props));
    return (
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
            <View style={styles.logoContainer}>
                <Image
                    style={styles.logo}
                    source={require('../../images/XXX.png')}/>
            </View>
            <View style={styles.formContainer}>

                <View style={styles.containerText}>
                    <TextInput
                        placeholder="Username or email"
                        placeholderTextColor="rgba(255,255,255,0.7)"
                        underlineColorAndroid='rgba(0,0,0,0)'
                        returnKeyType="next"
                        onSubmitEditing={() => this.passwordInput.focus()}
                        keyboardType="email-address"
                        autoCapitalize="none"
                        autoCorrect={false}
                        style={styles.input}
                    />

                    <Icon.Button style={styles.buttonContainer} name="unlock" justifyContent="center">RECOVER PASSWORD
                    </Icon.Button>
                </View>
            </View>
        </KeyboardAvoidingView>
    );
  }
}

Теперь я хочу иметь возможность управлять всем со страницы login.js, передавая либо loginForm.js, либо ForgotPasswordForm.js (еще не создано, но в этот момент будет содержать только TextInput), в зависимости от того, будет ли пользователь нажимает «Забыли пароль?» (в loginForm.js). практически так:

export default class Login extends React.Component {
static navigationOptions = {
    header: null
}
render() {
    alert(JSON.stringify(this.props));
    return (
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <View style={styles.logoContainer}>
                    <Image
                        style={styles.logo}
                        source={require('../../images/XXX.png')}/>
                </View>
                <View style={styles.formContainer}>
                    if (ROUTE != FORGETPASSWORD)
                <LoginForm navigation={this.props.navigation}/>
                    else
                <ForgetPasswordForm navigation={this.props.navigation}/>
                </View>
        </KeyboardAvoidingView>
    );
}

} * * тысяча двадцать-один

Answer 1

Если вы используете Redux , они предоставляют функцию для получения текущего routeName в react-navigation документах

function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getActiveRouteName(route);
  }
  return route.routeName;
}

Таким образом, вы можете легко получить имя текущего маршрута с помощью getActiveRouteName(yourNavigationState), а затем отобразить свой компонент только на определенном маршруте

<View>
  …
  {
    getActiveRouteName(yourNavigationState) !== 'ForgetPassword' ? 
      <LoginForm /> : <ForgetPasswordForm />
  }
  …
</View>

Answer 2

Вы можете просто передать реквизиты вниз по дереву компонентов, написав их рядом с компонентом. Вот официальные документы React. Если вы прочитаете их пример, они передают "имя" реквизита компоненту <Welcome>. В компоненте <Welcome> теперь у вас есть доступ к this.props.name.