不确定是不是对象的反应本地

Question

我没有为什么我收到

任何想法“不确定是不是（评估 ‘_this.props.navigation.navigate’）的对象”

我是新的反应，但我已经通过每个可能的解决方案，但仍然得到这个错误。我分享我下面的代码：

App.js

import React from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 
import Login from './app/components/Login/Login'; 
import Dashboard from './app/components/Dashboard/Dashboard'; 
import {StackNavigator} from 'react-navigation'; 

const Application = StackNavigator({ 
     Home: { screen: Login }, 
     Dashboard: { screen: Dashboard }, 
    }, { 
     navigationOptions: { 
      header: false 
     } 
}); 

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

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 
}); 

Login.js

import React from 'react'; 
import { StyleSheet, View, Image, Text, TextInput, KeyboardAvoidingView } from 'react-native'; 
import LoginForm from './LoginForm'; 
import {StackNavigator} from 'react-navigation'; 

export default class Login extends React.Component { 

    render() { 
     return (
      <KeyboardAvoidingView behavior='padding' style={styles.container}> 
       <View style={styles.logoContainer}> 
        <Image source={require('../../images/logo.png')} 
          style={styles.logo} 
        /> 
       </View> 
       <Text style={styles.title}>Share Emotions Instantly..</Text> 
       <View style={styles.formContainer}> 
        <LoginForm></LoginForm> 
       </View> 
      </KeyboardAvoidingView> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#bdc3c7', 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 

    logoContainer: { 
     alignItems: 'center', 
     justifyContent: 'center' 
    }, 

    logo: { 
     width: 70, 
     height: 70 
    } 
}); 

LoginForm.js

import React from 'react'; 
import { StyleSheet, View, TextInput, TouchableOpacity, Text, Alert } from 'react-native'; 
import Dashboard from '../Dashboard/Dashboard'; 
import {StackNavigator} from 'react-navigation'; 

export default class LoginForm extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    onButtonPress =() => { 
     alert('ok'); 
     const { navigate } = this.props.navigation; 
     navigate('Dashboard'); 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <TextInput underlineColorAndroid="transparent" 
          style={styles.input} 
          placeholder="username or email" 
          placeholderTextColor='rgba(255,255,255,0.5)' 
          returnKeyType="next" 
          keyboardType="email-address" 
          autoCapitalize="none" 
          autoCorrect={false} 
          onSubmitEditing={() => this.passwordInput.focus()}> 
       </TextInput> 

       <TextInput underlineColorAndroid="transparent" 
          style={styles.input} 
          placeholder="password" 
          placeholderTextColor='rgba(255,255,255,0.5)' 
          returnKeyType='go' 
          ref={(input) => this.passwordInput = input} 
          secureTextEntry> 
       </TextInput> 

       <TouchableOpacity style={styles.buttonContainer} 
            onPress={this.onButtonPress}> 
        <Text style={styles.buttonText}>Login</Text> 
       </TouchableOpacity> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     padding: 20 
    }, 

    input: { 
     height: 40, 
     marginBottom: 15, 
     backgroundColor: 'rgba(255,255,255,0.2)', 
     paddingHorizontal: 10, 
     width: 300 
    }, 

    buttonContainer: { 
     backgroundColor: '#888', 
     paddingVertical: 10 
    }, 

    buttonText: { 
     textAlign: 'center', 
     color: '#fff', 
     fontWeight: '700' 
    } 
}); 

个Dashboard.js

import React from 'react'; 
import { StyleSheet, View } from 'react-native'; 
import {StackNavigator} from 'react-navigation'; 

export default class Dashboard extends React.Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text>this is Dashboard</Text> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1 
    } 
}); 

我知道这是一个常见的问题，但我仍然没有得到为什么“导航”的对象还没有穿过的道具给其他组件。

Answer 1

导航属性将被注入到您添加到ScreenNavigator的路由配置的所有屏幕中（在您的案例中为主页和仪表板）。但是，对于这些屏幕的子组件，您将不得不传递导航属性。

<LoginForm navigation={this.props.navigation} />