如何使用 React Native 将一个页面导航到另一个页面？

Question

my scenario, I am trying to navigate login.js page to home.js page. I need to implement navigation but need to hide into login.js but need to show into home.js. Here, login button click to navigate home page. The navigation should support iOS and Android both platform.how to achieve this?

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View} from 'react-native';
import Login from './components/Login';

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

Login.js

import React from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';

export default class Login extends React.Component {
    state = {
       isLoading: false 
    };

    showLoader = () => {
        this.setState({ isLoading: true });
    };

    // Login Click Action
    loginclick = () => {
        //this.showLoader();
        console.log('Login Clicked...'); // Need to move home page
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} onPress={(this.loginclick)}>
                    <Text style={styles.btntext}>Sing In</Text>
                </TouchableOpacity>
                <View style={styles.activityview, styles.horizontal}>
                    <ActivityIndicator size="large" animating={this.state.isLoading} color='#fff' />
                </View>
            </View>
        );
    }
}

Package.json

   {
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.5",
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7",
    "react-navigation": "^1.6.1",
    "react-navigation-stack": "^2.0.16"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

Answer 1

You can use React Navigation for moving different screens.

Change your App.js as below in order to handle navigation

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Login from "./components/Login";
import Home from "import your home component";

const RootStack = createStackNavigator(
  {
    Login: Login,
    Home: Home
  },
  {
    initialRouteName: "Login"
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

After that, you can handle navigation to Home from Login changing your loginclick function as below

loginclick = () => {
    this.props.navigation.navigate('Home')
}

Hope this helps you. Feel free for doubts.