Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use Navigator component in react-native
'use strict';
var React = require('react-native');
var {
AppRegistry,
View,
Navigator,
Text,
BackAndroid,
StyleSheet
} = React;
var FeedView = React.createClass({
goBack(){
this.props.navigator.push({name:"default"});
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.goBack} >
I am Feed View! Tab to default view!
</Text>
</View>
)
}
});
var WelcomeView = React.createClass({
onPressFeed() {
this.props.navigator.push({name: 'feed'});
},
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.onPressFeed} >
This is welcome view.Tap to go to feed view.
</Text>
</View>
);
}
});
var DefaultView = React.createClass({
render(){
return (
<View style={styles.container}>
<Text style={styles.welcome}>Default view</Text>
</View>
)
}
});
var SampleApp = React.createClass({
configureScene(route){
return Navigator.SceneConfigs.FadeAndroid;
},
renderScene(router, navigator){
var Component = null;
this._navigator = navigator;
switch(router.name){
case "welcome":
Component = WelcomeView;
break;
case "feed":
Component = FeedView;
break;
default: //default view
Component = DefaultView;
}
return <Component navigator={navigator} />
},
componentDidMount() {
var navigator = this._navigator;
BackAndroid.addEventListener('hardwareBackPress', function() {
if (navigator && navigator.getCurrentRoutes().length > 1) {
navigator.pop();
return true;
}
return false;
});
},
componentWillUnmount() {
BackAndroid.removeEventListener('hardwareBackPress');
},
render() {
return (
<Navigator
initialRoute={{name: 'welcome'}}
configureScene={this.configureScene}
renderScene={this.renderScene} />
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 30,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('AwesomeProject', () => SampleApp);
@MyHandsome

This comment has been minimized.

Copy link

@MyHandsome MyHandsome commented Apr 15, 2016

的发生

@MyHandsome

This comment has been minimized.

Copy link

@MyHandsome MyHandsome commented Apr 15, 2016

dd1

@iFlyCai

This comment has been minimized.

Copy link

@iFlyCai iFlyCai commented Aug 10, 2016

你这是ES5写的吧

@LikeFlower

This comment has been minimized.

Copy link

@LikeFlower LikeFlower commented Oct 13, 2016

android 上太慢了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.