1

我已经在我的根组件（App.js）中定义了我的所有路线/导航，并试图通过单击按钮从子组件（LoginScreen）访问其中一个屏幕（UserScreen）。

这是我的 App.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableHighlight, Button } from 'react-native';
import LoginComponent from './components/LoginComponent';
import { StackNavigator } from 'react-navigation';


class MainWelcome extends React.Component {
 render() {
   return (
    <View>
     <Text>Welcome Page</Text>
    <Button
      title="Login"
      onPress={() => this.props.navigation.navigate('Login')}
    />
  </View>
  );
 }
}

class LoginScreen extends React.Component {
 render() {
  return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <LoginComponent />
   </View>
  );
 }
}

class UserScreen extends React.Component {
 render() {
  return (
  <View>
    <Text>Details Screen</Text>
  </View>
  );
 }
}

 const RootStack = StackNavigator(
  {
  Register: {
   screen: RegisterScreen,
  },
  Login: {
   screen: LoginScreen,
  },
  UserPage: {
   screen: UserScreen,
  },
  Welcome: {
   screen: MainWelcome,
  },
 },
{
  initialRouteName: 'Welcome',
 }
);

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

这是我的 LoginComponent.js

  import React from 'react';
  import { StyleSheet, Text, View, TouchableHighlight, TextInput, StackNavigator } from 'react-native';

  class LoginComponent extends React.Component {
   constructor(){
    super();
        this.state = {
                loginusername: '',
                loginpassword: '',
                isloggedin: false,
                loggedinuser: null,
        }  
      }

  render() {
   return (
    <View>
      <Text>Please Log In</Text>
    <View>
       <TextInput
           placeholder="USERNAME"
           placeholderTextColor = 'black'
           onChangeText={(loginusername) => this.setState({loginusername})}
            />
      <TextInput
                placeholder="Password"
                placeholderTextColor = 'black'
                onChangeText={(loginpassword) => this.setState({loginpassword})}
            />
      <TouchableHighlight onPress={() => {
        {this.props.navigation.navigate('UserPage')}
        }
      }>
      <View>
      <Text>Login</Text>
      </View>
    </TouchableHighlight>
    </View>  
  </View>
  );
 }
}

export default LoginComponent;

在 LoginComponent.js 中，我正在{this.props.navigation.navigate('UserPage')}通过单击按钮重定向到用户屏幕，但它显示TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate'). 我不确定自己做错了什么，是否应该将 App.js 中的某些内容传递给 LoginComponent.js。

4

1 回答 1

4

如果你试图打印你的 LoginComponent 的道具，你最终会一无所获！但是如果你像这样将导航作为道具传递给你的组件呢！：

// App.js
class LoginScreen extends React.Component {
...
<LoginComponent navigation={this.props.navigation}/>
...
}

您最终将获得功能导航道具。

快乐的用户详细信息导航:)

于 2018-03-11T00:13:12.673 回答