在通过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> ); }}
红色的代替蓝色的就可以解决此问题了