[英]how to solve Cannot read property 'push' of undefined on react-native?
[英]React-Native Navigator: Cannot read property 'push' of undefined
所以我在玩React Native,在成功使用第一个导航器后,我制作了另一个导航器以路由到另一个页面。
这是我的文件结构:
项目
-安卓/
-备份/
-iOS /
-node_modules /
-src /
-buy.js
-chat.js
-main.js
-nargo.ios.js
-styles.js
-index.android.js /
-index.ios.js /
-intro.js /
-main.js /
-package.json /
这是我的-index.ios.js :
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import AppIntro from 'react-native-app-intro';
import Main from './main';
class Project extends Component {
render() {
return (
<Main />
);
}
}
AppRegistry.registerComponent('Project', () => Project);
这是我的-main.js (此代码是到intro.js的成功路由,作为initialRoute):
import React, { Component } from 'react';
import {
Navigator,
View
} from 'react-native';
import mainApp from './src/main';
import intro from './intro';
import buy from './src/buy';
const routes = {
intro,
mainApp,
buy
}
module.exports = React.createClass({
render(){
return (
<Navigator
initialRoute={{name: 'intro'}}
renderScene={this.renderScene}
/>
)
},
renderScene(route, navigator){
let Component = routes[route.name];
return(
<Component
navigator={navigator}
/>
)
}
});
这是我的-intro.js (在此代码中,单击“完成”按钮时,我再次成功路由到另一个页面( --main.js )):
import React, { Component } from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Image
} from 'react-native';
import AppIntro from 'react-native-app-intro';
import styles from './styles';
const styless = StyleSheet.create({
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
padding: 15,
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
Desc1: {
paddingTop: 20,
color: '#fff',
fontSize: 13,
fontWeight: '500',
textAlign: 'center',
fontFamily: "Raleway-Bold",
},
});
class intro extends Component {
doneBtnHandle = () => {
this.props.navigator.push({name: 'mainApp'})
}
onSlideChangeHandle = (index, total) => {
console.log(index, total);
}
render() {
return (
<AppIntro
onNextBtnClick={this.nextBtnHandle}
onDoneBtnClick={this.doneBtnHandle}
onSlideChange={this.onSlideChangeHandle}
doneBtnLabel='Done'
skipBtnLabel=''
nextBtnLabel='>'
>
<View style={[styless.slide, { backgroundColor: '#555555' }]}>
<View level={-25}>
<Text style={styless.Desc1}>Welcome!</Text>
</View>
</View>
<View style={[styless.slide,{ backgroundColor: '#527bac' }]}>
<View level={-25}>
<Text style={styless.Desc1}>The Answer!</Text>
</View>
</View>
<View style={[styless.slide, { backgroundColor: '#33691e' }]}>
<View level={-25}>
<Text style={styless.Desc1}>The Question!</Text>
</View>
</View>
</AppIntro>
);
}
}
module.exports = intro;
这是我的--main.js (在此代码中,我正在使用TabBarIOS并自动将--nargo.ios.js用作此处的初始页面):
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
TabBarIOS,
StyleSheet,
Text,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import nargo from './nargo.ios';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'nargo'
};
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}
barTintColor='#dcdcdc'>
<Icon.TabBarItem
title="nargo"
iconName="ios-home"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'nargo'}
onPress={() => {
this.setState({
selectedTab: 'nargo',
});
}}>
</Icon.TabBarItem>
<Icon.TabBarItem
onPress={() => {
this.setState({
selectedTab: 'chat',
});
}}
selected={this.state.selectedTab === 'chat'}
title="Chat"
iconName="ios-chatbubbles"
selectedIconName="ios-chatbubbles">
</Icon.TabBarItem>
</TabBarIOS>
);
}
}
module.exports = Main;
这是我的--nargo.js (在此代码中,问题出在哪里。单击“ 购买”按钮时 ,我想转到--buy.js页面):
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
ListView,
TouchableHighlight,
AlertIOS,
SwitchIOS,
ScrollView,
TouchableOpacity,
Navigator
} from 'react-native';
const styles = require('./styles.js');
import * as Animatable from 'react-native-animatable';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
class nargo extends Component {
render() {
var _scrollView: ScrollView;
return (
<View style={styles.container}>
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
scrollEventThrottle={200}
style={styles.scrollView}>
<TouchableOpacity
style={styles.buttonContainer}
onPress={() => {
this.props.navigator.push({name: 'buy'})
}}
>
<Text style={styles.buttonText}>Buy !</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
}
module.exports = nargo;
这是我的--buy.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';
class cak extends Component {
render() {
return (
<View>
<Text>
Holla!
</Text>
</View>
);
}
}
module.exports = cak;
我尝试了这段代码,并给了我这个错误屏幕:
有人可以帮我解决此问题吗? 提前致谢。
=========解决了========
我在第一个TabBariOS中添加了<nargo navigator={this.props.navigator} />
行。 感谢那些帮助我的人。
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
TabBarIOS,
StyleSheet,
Text,
View
} from 'react-native';
import buy from './buy';
import Icon from 'react-native-vector-icons/Ionicons';
import nargo from './nargo.ios';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'nargo'
};
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}
barTintColor='#dcdcdc'>
<Icon.TabBarItem
title="nargo"
iconName="ios-home"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'nargo'}
onPress={() => {
this.setState({
selectedTab: 'nargo',
});
}}>
<nargo navigator={this.props.navigator} />
</Icon.TabBarItem>
<Icon.TabBarItem
onPress={() => {
this.setState({
selectedTab: 'chat',
});
}}
selected={this.state.selectedTab === 'chat'}
title="Chat"
iconName="ios-chatbubbles"
selectedIconName="ios-chatbubbles">
</Icon.TabBarItem>
</TabBarIOS>
);
}
}
module.exports = Main;
如果要浏览组件,则应在选项卡栏项中传递Component,也应传递导航器,例如:
<TabBarIOS selectedTab={this.state.selectedTab}
barTintColor='#dcdcdc'>
<Icon.TabBarItem
title="nargo"
iconName="ios-home"
selectedIconName="ios-home"
selected={this.state.selectedTab === 'nargo'}
onPress={() => {
this.setState({
selectedTab: 'nargo',
});
}}>
//here you should pass the component and the navigator, ex:
<ComponentName navigator={this.props.navigator} />
</Icon.TabBarItem>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.