我沒有爲什麼我收到不確定是不是對象的反應本地
任何想法「不確定是不是(評估 ‘_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
}
});
我知道這是一個常見的問題,但我仍然沒有得到爲什麼「導航」的對象還沒有穿過的道具給其他組件。
我看不到你在哪裏試圖將'navigation'作爲道具傳遞到任何地方? – Chris
我是新來對自己做出反應,但我認爲當您在Login組件中創建LoginForm元素時,您需要傳遞屬性。 –
Leth
@讓我沒有任何東西可以通過。只需點擊按鈕即可導航到儀表板頁面。如果我仍然需要這樣做,你可以告訴我哪個屬性通過,以及如何? – WahidSherief