React-Navigation: навигация по нажатию не работает

Question

Я немного запутался в этой навигационной системе.У меня есть рут, в котором содержатся навигации.И у меня есть два разных экрана.Нет проблем до здесь.Я поставил initialRoute и отображаю SignInScreen.Также добавьте кнопку для экрана регистрации, но эта кнопка не работает.

Root.js

const ScreenNavigator = createStackNavigator({
    SignIn: SignInScreen,
    SignUp: SignUpScreen,
},
    {initialRouteName: 'SignIn' }
);

const ScreenContainer = createAppContainer(ScreenNavigator);

export default class Root extends Component{
    render(){
        return(
            <ScreenContainer style={styles.container} />
        );
    }
}

и SignInScreen:

import SignUpScreen from '../screens/Signup';

export default class SignInScreen extends Component{
    constructor(props){
        super(props);
    }

    render(){
        return(
            <View style={styles.container}>
                <Text>Sign in Screen </Text>
                <Button
                    title={'Sign up'}
                    onPress={() => this.props.navigation.navigate('SignUpScreen')}
                />
            </View>
        );
    }
}

это то, чтоЯ здесь скучаю?Спасибо за помощь.

Answer 1

Ошибка в имени маршрута.

onPress = {() => this.props.navigation.navigate('SignUp')}

Попробуйте сохранить имена маршрутов в постоянном файле.Это может облегчить работу.

const routes = {
  route1: 'route1',
  route2: 'route2',
};

const ScreenNavigator = createStackNavigator({
    [routes.route1]: Screen1,
    [routes.route2]: Screen2,
},
    {initialRouteName: routes.route1 }
);

Answer 2

В коде нет ничего плохого, вы просто пропускаете маршрут.Нет имени маршрута SignUpScreen, правильное имя маршрута SignUp и SignIn

путаница связана с изменением API реагирующей навигации

перед тем, как мы определим маршрут, например

Login: { 
  screen: LoginScreen
}

, так что login - это имя маршрута, а screen - это просто компонент, который нам нужен для визуализации

, но после версии 2 ^ он изменился на

{SignIn: SignInScreen} 

, поэтому теперь имяSignIn, а компонент SignInScreen

, даже если вы хотите, чтобы имя маршрута использовалось в качестве компонента, просто сделайте

const ScreenNavigator = createStackNavigator({
    SignInScreen,
    SignUpScreen,
},

, теперь ваше имя маршрута SignInScreen и SignUpScreen

надеюсь, что этой информации достаточно