Skip to content

Instantly share code, notes, and snippets.

@flyingzl
Last active September 26, 2017 06:32
Show Gist options
  • Save flyingzl/3188e8e5dfa49e68432b to your computer and use it in GitHub Desktop.
Save flyingzl/3188e8e5dfa49e68432b to your computer and use it in GitHub Desktop.
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);
@zhongyu-y
Copy link

dd1

@iFlyCai
Copy link

iFlyCai commented Aug 10, 2016

你这是ES5写的吧

@LikeFlower
Copy link

android 上太慢了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment