Question

React-Navigation：Navigation onPress 不起作用

2019-01-04

1773

react-native react-navigation

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

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

混淆是由于 React Navigation 的 api 发生变化造成的

在我们定义像

Login: { 
  screen: LoginScreen
}

这样的路由之前，login 是一个路由名称，而 screen 只是我们需要渲染的一个组件

但是在 2^ 版本之后，它更改为

{SignIn: SignInScreen}

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

即使您想要一个路由名称作为组件，只需执行

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

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

希望这些信息足够

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