React-Native 侧滑容器DrawerLayoutAnd

2016-06-11  本文已影响251人  小张呵呵

感谢东方耀老师


  

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  PixelRatio,
  Text,
  Image,
  TouchableHighlight,
  DrawerLayoutAndroid,
  ProgressBarAndroid,
  View

} from 'react-native';



class MyFirstProject extends Component {

  show(txt) {
    alert(txt);
  }
  render() {
    var nagvigationView = (
      <View style={{ flex: 1, backgroundColor: "#ff0" }}>
        <Text style={{ margin: 10, fontSize: 12, textAlign: 'left' }}>i  m nagvigation</Text>
      </View>
    );

    return (

      <DrawerLayoutAndroid
        drawerWidth = {300}
        drawerPosition = {DrawerLayoutAndroid.positions.Left}
        renderNavigationView = {() => nagvigationView}
        // renderNavigationView={() => navigationView}
        >
        <View style ={styles.flex}>

          <Image style={styles.img}
            source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
            />
          <TouchableHighlight  onPress={this.show.bind(this, '欢迎学习React Native技术') }
            underlayColor='#333'>
            <Text style={styles.touchtext}>haha</Text>
          </TouchableHighlight>
        </View>

      </DrawerLayoutAndroid >
      
    );
  }
}




const styles = StyleSheet.create({

  flex: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    height: 300,
    width: 300,
    borderRadius: 150,
    borderColor: '#ccc',
  },
  touchtext: {
    fontSize: 39,
    width: 300,
    alignItems: 'center',
    justifyContent: 'center',

  }


});


AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject);

上一篇下一篇

猜你喜欢

热点阅读