reactnative(2) - Navigator 使用案例

‘use strict‘;
import React, { Component } from ‘react‘;
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Navigator,
} from ‘react-native‘;

class NavButton extends React.Component{
   render(){
     return(
       <TouchableHighlight style={styles.button}
       underlayColor=‘#b5b5b5‘ onPress={this.props.onPress}>
       <Text style={styles.text}>{this.props.text}</Text>
       </TouchableHighlight>
     );
   }

}
class NavMenu extends React.Component{
  render(){
    return(
      <View style={{flex:1,}}>
      <Text style={styles.messageText}>{this.props.message}</Text>
      <NavButton onPress={()=>{this.props.navigator.push({
        message:‘Push进来的页面‘,
        sceneConfig:Navigator.SceneConfigs.FloatFromRight,
      });}} text=‘Push到下一级页面‘ />

      <NavButton onPress={() => {
            this.props.navigator.push({
              message: ‘Present进来的页面‘,
              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
            });
          }}
          text="Present到下一级页面"
        />
        <NavButton onPress={() => {
            this.props.navigator.pop();
          }}
          text="Pop到上一级页面"
        />
        <NavButton  onPress={() => {
            this.props.navigator.popToTop();
          }}
          text="Pop到主页面"
        />
      </View>
    );
  }
}
class MyProject extends Component {

  render() {
    return (
      <Navigator style={styles.container}  initialRoute={{message:‘主页面‘,}}
      renderScene={(route,navigator)=><NavMenu
            message={route.message}
            navigator={navigator}
          />} configureScene={(route)=>{
             if (route.sceneConfig) {
               return route.sceneConfig;
             }
             return Navigator.SceneConfigs.FloatFromBottom;
          }}/>
    );
  }

}

const styles = StyleSheet.create({
  container: {
      flex: 1,
     },
     messageText: {
      fontSize: 14,
      fontWeight: ‘500‘,
      padding: 15,
      marginTop: 50,
      marginLeft: 15,
    },
    button: {
      backgroundColor: ‘green‘,
      padding: 15,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: ‘black‘,
    },
    text:{
      fontSize:14,
      color:‘white‘,
    },
});

AppRegistry.registerComponent(‘MyProject‘, () => MyProject);

效果图:

参考案例:

http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/