React-Navigation：导航 onPress 不起作用答案

【问题标题】：React-Navigation: Navigation onPress doesn't workReact-Navigation：导航 onPress 不起作用
【发布时间】：2019-01-04 05:27:45
【问题描述】：

我对这个导航系统有点困惑。我有根，其中包含导航。我有两个不同的屏幕。到这里都没问题。我放了 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} />
        );
    }
}

和登录屏幕：

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

这是我在这里缺少的东西吗？谢谢你的帮助。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

代码没有错，你只是错过了拼写路线。没有路由名SignUpScreen，正确的路由名是SignUp和SignIn

混乱是由于反应导航的api发生了变化

在我们定义路由之前

Login: { 
  screen: LoginScreen
}

所以 login 是一个路由名称，screen 只是我们需要渲染的一个组件

但是在2^版本之后，它变成了

{SignIn: SignInScreen}

所以现在名称是SignIn，组件是SignInScreen

即使你想要一个路由名称作为组件，也可以这样做

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

现在您的路线名称是 SignInScreen 和 SignUpScreen

希望这些信息足够了

【讨论】：

你确定吗？我的组件名称是 SignUpScreen 和 SignInScreen，这就是我可以导入和导出的原因...您的意思是：我需要将 {SignIn: SignInScreen} 更改为 {SignIn: SignIn} 这个？
哦，我现在明白了。谢谢你的例子。它现在修复了:) 我在这方面有点新手。
@Barbie 没关系 :) 享受编码

【解决方案2】：

路线名称问题。

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

尽量将路由名称保存在常量文件中。它可能会让事情变得更容易处理。

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

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

【讨论】：