Question

作为React Native的新手，我试图找到一种在页面之间导航的方法。我从Google那里找到的所有内容都是关于在App.js内部的类和其他一些分隔文件的类之间导航，这对我不起作用。我发现了很多使用'Navigator'，'StackNavigator'，'React-native-router-flux'的示例，但是没有一个对我有用。这是我需要学习的：

登录页面：./src/pages/Login.js

主页：./ src / pages / Home.js

登录页面（用户名和密码）------>如果为真----->主页

Answer 1

只需安装插件

npm install --save react-navigation

在您的app.js中导入插件和文件

import {
  createStackNavigator,
} from 'react-navigation';

import LoginScreen from './src/pages/Login.js';
import HomeScreen from './src/pages/Home.js';

const App = createStackNavigator({
  Login: { screen: LoginScreen },
  Home: { screen: HomeScreen },
});

将此视为您的登录屏幕

class LoginScreen extends React.Component {
    static navigationOptions = {
        title: 'Login',
    };
    render() {
        return (
            <Button
                title="Login"
                onPress={() => this.checkLogin() }
            />
        );
    }

    checkLogin = () => {
        const { navigate } = this.props.navigation;
        if(username == "user" && password == "pass"){
            navigate('Home')
        }
    }
}

从React navigation中查找更多信息

我如何在React Native App中的多个.js文件之间导航？

1 个答案: