反应导航问题，它不能按我的意愿工作

Question

我是 React-Native 的新手，正在尝试构建一个应用程序。按下按钮时，我想进入“Giriş”屏幕。但它没有按我的意愿工作.................................................................. ..................................................... ..................................................... ........ Welcome.js 文件如下所示：

import React from 'react';
import { View, Image, StatusBar, Dimensions, Text } from 'react-native';
import Swiper from 'react-native-swiper';
import Button from 'components/Button';

import fonts from 'theme/fonts';
import swiperData from './swiperData';
import { FacebookIcon, FashTagIcon } from '../../components/Icons/Icons';

const { width, height } = Dimensions.get('window');

function Welcome({ navigation: { navigate } }) {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />

      <Swiper
        style={styles.wrapper}
        dot={<View style={styles.dot} />}
        activeDot={<View style={styles.activeDot} />}
        paginationStyle={{ bottom: 70 }}
        loop={false}
      >
        {swiperData.map(item => (
          <View style={styles.slide} key={item.id}>
            <Image style={styles.image} source={item.image} />
            <View style={styles.contentWrapper}>
              <View style={styles.boxWrapper}>
                <View style={[styles.box, { backgroundColor: item.color }]}>
                  <View style={styles.textWrapper}>
                    <Text style={styles.text}>{item.label}</Text>
                    <Text style={styles.description}>{item.description}</Text>
                  </View>
                </View>
              </View>
              {item.hasButton && (
                <View style={styles.buttonWrapper}>
                  <Button
                    label="Giriş Yap / Hesap Oluştur"
                    theme="red"
                    onPress={() => navigate('Giriş')}
                    labelStyle={styles.labelStyle}
                    // eslint-disable-next-line react-native/no-inline-styles
                    style={{ marginVertical: 10 }}
                    icon={<FashTagIcon width={30} height={30} />}
                  />
                  <Button
                    label="Facebook ile Oturum Aç"
                    theme="blue"
                    onPress={() => navigate('Home')}
                    labelStyle={styles.labelStyle}
                    icon={<FacebookIcon width={30} height={30} />}
                  />
                </View>
              )}
            </View>
          </View>
        ))}
      </Swiper>
    </View>
  );
}

export default Welcome;

AuthScreen.js 文件如下所示：

    import React, { useState, useEffect, useReducer, useCallback } from 'react';
    import { ScrollView, View, StyleSheet, Button, ActivityIndicator, Alert } from 'react-native';
    import { LinearGradient } from 'expo-linear-gradient';
    import { useDispatch } from 'react-redux';
    import Home from '../Home/Home';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from 'react-navigation-stack';
    import { createAppContainer } from 'react-navigation';
    
    import Input from '../../components/UI/Input';
    import Card from '../../components/UI/Card';
    import Colors from '../../constants/Colors';
    import * as authActions from '../../store/actions/auth';
    
    const FORM_INPUT_UPDATE = 'FORM_INPUT_UPDATE';
    
    const formReducer = (state, action) => {
      if (action.type === FORM_INPUT_UPDATE) {
        const updatedValues = {
          ...state.inputValues,
          [action.input]: action.value,
        };
        const updatedValidities = {
          ...state.inputValidities,
          [action.input]: action.isValid,
        };
        let updatedFormIsValid = true;
        for (const key in updatedValidities) {
          updatedFormIsValid = updatedFormIsValid && updatedValidities[key];
        }
        return {
          formIsValid: updatedFormIsValid,
          inputValidities: updatedValidities,
          inputValues: updatedValues,
        };
      }
      return state;
    };
    
    const AuthScreen = props => {
      const [isLoading, setIsLoading] = useState(false);
      const [error, setError] = useState();
      const [isSignup, setIsSignup] = useState(false);
      const dispatch = useDispatch();
    
      const [formState, dispatchFormState] = useReducer(formReducer, {
        inputValues: {
          email: '',
          password: '',
        },
        inputValidities: {
          email: false,
          password: false,
        },
        formIsValid: false,
      });
    
      useEffect(() => {
        if (error) {
          Alert.alert('Bir hata var!', error, [{ text: 'Tamam' }]);
        }
      }, [error]);
    
      const authHandler = async () => {
        let action;
        if (isSignup) {
          action = authActions.signup(formState.inputValues.email, formState.inputValues.password);
        } else {
          action = authActions.login(formState.inputValues.email, formState.inputValues.password);
        }
        setError(null);
        setIsLoading(true);
        try {
          await dispatch(action);
          props.navigation.navigate('Home');
        } catch (err) {
          setError(err.message);
          setIsLoading(false);
        }
      };
    
      const inputChangeHandler = useCallback(
        (inputIdentifier, inputValue, inputValidity) => {
          dispatchFormState({
            type: FORM_INPUT_UPDATE,
            value: inputValue,
            isValid: inputValidity,
            input: inputIdentifier,
          });
        },
        [dispatchFormState],
      );
    
      return (
        <LinearGradient colors={['#ffedff', '#ffe3ff']} style={styles.gradient}>
          <Card style={styles.authContainer}>
            <ScrollView>
              <Input
                id="email"
                label="E-Posta"
                keyboardType="email-address"
                required
                email
                autoCapitalize="none"
                errorText="Lütfen geçerli bir e-posta girin."
                onInputChange={inputChangeHandler}
                initialValue=""
              />
              <Input
                id="password"
                label="Şifre"
                keyboardType="default"
                secureTextEntry
                required
                minLength={5}
                autoCapitalize="none"
                errorText="Lütfen geçerli bir şifre girin."
                onInputChange={inputChangeHandler}
                initialValue=""
              />
              <View style={styles.buttonContainer}>
                {isLoading ? (
                  <ActivityIndicator size="small" color={Colors.primary} />
                ) : (
                  <Button
                    title={isSignup ? 'Kayıt ol' : 'Giriş yap'}
                    color={Colors.primary}
                    onPress={authHandler}
                  />
                )}
              </View>
              <View style={styles.buttonContainer}>
                <Button
                  title={isSignup ? 'Zaten bir hesabın var mı?' : 'Hesabın yok mu?'}
                  color={Colors.accent}
                  onPress={() => {
                    setIsSignup(prevState => !prevState);
                  }}
                />
              </View>
            </ScrollView>
          </Card>
        </LinearGradient>
      );
    };
    
    const AppNavigator = createStackNavigator(
      {
        Giriş:{
          screen: AuthScreen,
        }
      }
    );

    export default createAppContainer(AppNavigator);

有人帮忙吗？

Answer 1

我认为您需要像这样将欢迎组件添加到堆栈导航器：

const AppNavigator = createStackNavigator(
      {
        Giriş:{
          screen: AuthScreen,
        },
        Welcome:{
          screen: Welcome,
        }
      },{
        initialRouteName: "YourInitialScreen",
        }
    );