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

Question

我的场景，我正在尝试将 login.js 页面导航到 home.js 页面。我需要实现navigation，但需要隐藏到login.js中，但需要显示到home.js中。在这里，单击登录按钮可导航主页。导航应该支持iOS和Android两个平台。如何实现这一点？

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

您可以使用React Navigation用于移动不同的屏幕。

如下更改您的 App.js 以处理导航

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

之后，您可以按照如下方式处理从 Login 到 Home 的导航，更改您的 loginclick 函数

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

希望这对您有帮助。如有疑问，请放心。