undefined is not an object (evaluating 'this.props.navigator.push')
阿新 • • 發佈:2019-02-12
在通過navigator 進行頁面跳轉的過程中 一直報 這樣的錯誤
先看程式入口檔案index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
Navigator,
} from 'react-native';
import Welcome from './Welcome';
class MyProject extends Component {
render() {
var defaultName = 'Welcome';
var defaultComponent = Welcome;
return (
<Navigator
//指定了預設的頁面,也就是啟動app之後會看到的第一屏,需要兩個引數,name跟component
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
//跳轉的動畫
return Navigator.SceneConfigs.FadeAndroid;
}}
renderScene={(route, navigator) => {
let Component = route.component;
if(route.component){
return <Component {...route.params} navigator={navigator} />
}
}} />
);
}
}
AppRegistry.registerComponent('MyProject', () => MyProject);
再看 第一個頁面 歡迎頁面:Welcome.js
import React, { Component } from 'react';
import {
Text,
View,
Navigator,
TouchableHighlight
} from 'react-native';
import Login from "./Login";
export default class Welcome extends Component {
constructor(props){
super(props);
this.state = {};
}
_onPress(){
let navigator = this.props.navigator;
Alert.alert('Button has been pressed!'+navigator);
if (navigator) {
navigator.push({
name:'Login',
component:Login
});
}
}
render() {
return (
<View>
<TouchableHighlight onPress={this._onPress.bind(this)}>
<TouchableHighlight onPress={this._onPress}>
<Text >此為歡迎頁面 點選進入登入頁面</Text> </TouchableHighlight> </View> ); }}
紅色的代替藍色的就可以解決此問題了
先看程式入口檔案index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
Navigator,
} from 'react-native';
import Welcome from './Welcome';
class MyProject extends Component {
render() {
var defaultName = 'Welcome';
var defaultComponent = Welcome;
return (
<Navigator
//指定了預設的頁面,也就是啟動app之後會看到的第一屏,需要兩個引數,name跟component
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
//跳轉的動畫
return Navigator.SceneConfigs.FadeAndroid;
}}
renderScene={(route, navigator) => {
let Component = route.component;
if(route.component){
return <Component {...route.params} navigator={navigator} />
}
}} />
);
}
}
AppRegistry.registerComponent('MyProject', () => MyProject);
再看 第一個頁面 歡迎頁面:Welcome.js
import React, { Component } from 'react';
import {
Text,
View,
Navigator,
TouchableHighlight
} from 'react-native';
import Login from "./Login";
export default class Welcome extends Component {
constructor(props){
super(props);
this.state = {};
}
_onPress(){
let navigator = this.props.navigator;
Alert.alert('Button has been pressed!'+navigator);
if (navigator) {
navigator.push({
name:'Login',
component:Login
});
}
}
render() {
return (
<View>
<TouchableHighlight onPress={this._onPress.bind(this)}>
<TouchableHighlight onPress={this._onPress}>
<Text >此為歡迎頁面 點選進入登入頁面</Text> </TouchableHighlight> </View> ); }}
紅色的代替藍色的就可以解決此問題了