所以我正在使用 React Native,在我的第一个导航器成功后,我制作了另一个导航器来路由到另一个页面。
这是我的文件结构:
项目
- 安卓/
- 备份/
- ios/
- 节点模块/
- src/
-- buy.js
--chat.js
-- main.js
-- nargo.ios.js
-- 样式.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 的成功路由):
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;
我尝试了这段代码并给了我这个错误屏幕:
有人可以帮我解决这个问题吗? 提前致谢。
=========已解决========
我添加了<nargo navigator={this.props.navigator} />
到第一个 TabBariOS 的行。感谢那些帮助我的人。
'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>
关于javascript - React-Native 导航器 : Cannot read property 'push' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39350651/