Question

我试图在React Native中从“主页”导航到“欢迎”页面。我使用createStackNavigator和createAppContainer，将其绑定到导航器功能时遇到问题。解决后，错误消失了。但是它不是从家中导航而来。请帮助找到问题。是否需要将Rootstack导入所有其他文件？谢谢

App.js

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './screens/Home';
import Welcome from './screens/Welcome';

const RootStack = createStackNavigator(
  {
    home: Home,
    dashBoard:Welcome

  },
  {
    initialRouteParams: 'Home',
  }
);

const AppContainer = createAppContainer(RootStack);

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

Home:
import * as React from "react";
import { Image, StyleSheet, View,Text } from "react-native";
import imageLogo from "../assets/images/logo.jpg";
import Button from "../components/Button";
import FormTextInput from "../components/FormTextInput";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Welcome from '../screens/Welcome';

class App extends React.Component{
    constructor(){
        super();
        this.handleLoginPress= this.handleLoginPress.bind(this);
    }

handleLoginPress = ()=>{
    this.props.navigation.navigate('dashboard');
}


    render(){
        return (
        <>
            <View style={styles.cont}>
                <Image source={imageLogo} style={styles.logo}/>
            </View>
            <View style={styles.cont1}>

                <FormTextInput
                value={this.state.email}
                onChangeText={this.handleEmailChange}
                placeholder='email'
                />

                <FormTextInput
                value={this.state.password}
                onChangeText={this.handlePasswordChange}
                placeholder='password'
                />

                <Button label='login' onPress={this.handleLoginPress}/>

            </View>

</>
        );
    }
}
const styles = StyleSheet.create({
    logoContainer:{
        alignItems:'center'
    },

  logo: {
    width:120,
      height:120,

  },
  form: {
    flex: 1,
    justifyContent: "center",
    alignItems:'center'
  },
  backgroundContainer:{
      flex:2,
      width:null,
      height:null,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'#F5FCFF'
  },
  cont:{
  flex:1,
  backgroundColor:'white',
   justifyContent: "center",
      alignItems:'center'
  },
  cont1:{
    flex:2,
    backgroundColor:'white',
    justifyContent: "center",
          alignItems:'center'
    }
});

export default App;

Answer 1

否，您无法重新绑定箭头功能。您不能在箭头函数中使用bind更改此值。

使用

constructor(){
        super();
    }

handleLoginPress = ()=>{
    this.props.navigation.navigate('dashboard');
}

或

但是，您可以使用与箭头功能具有相同功能的常规函数，然后使用bind

constructor(){
            super();
            this.handleLoginPress= this.handleLoginPress.bind(this);
        }

    handleLoginPress(){
        this.props.navigation.navigate('dashboard');
    }

Answer 2

Prefer This Demo Code:   
  class First Screen extends React.Component {
      render() {
        const { navigate } = this.props.navigation;

        return (
          <View>
            <Text>This is the First screen of the app</Text>
            <Button
              on Press={() => navigate('Second ', { name: 'Demo' })}
              title="Go to next page"
            />
          </View>
        );
      }
    }

Answer 3

问题出在屏幕名称上。它不同于App.js中声明的内容

this.props.navigation.navigate无法正常工作

3 个答案: