React-Native 导航器:无法读取未定义的 属性 'push'
React-Native Navigator: Cannot read property 'push' of undefined
所以我在玩 React Native,在我的第一个 Navigator 成功之后,我制作了另一个 Navigator 来路由到另一个页面。
这是我的文件结构:
项目
- android/
- 备份/
- ios/
- node_modules/
- 来源/
-- 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;
您应该在 选项卡栏项中传递组件
如果您想在组件中导航,也可以传递导航器,例如:
<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>
所以我在玩 React Native,在我的第一个 Navigator 成功之后,我制作了另一个 Navigator 来路由到另一个页面。
这是我的文件结构:
项目
- android/
- 备份/
- ios/
- node_modules/
- 来源/
-- 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;
您应该在 选项卡栏项中传递组件 如果您想在组件中导航,也可以传递导航器,例如:
<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>