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

代码中没有什么不对的地方，只是您错过了拼写路线。没有路由名称SignUpScreen，正确的路由名称是SignUp和SignIn

混乱是由于反应导航的api改变

在定义

之类的路线之前

Login: { 
  screen: LoginScreen
}

因此，登录名是路线名称，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 }
);

React-Navigation：导航onPress不起作用

2 个答案: