美文网首页
React-Native 侧滑容器DrawerLayoutAnd

React-Native 侧滑容器DrawerLayoutAnd

作者: 小张呵呵 | 来源:发表于2016-06-11 09:51 被阅读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);
    
    

    相关文章

      网友评论

          本文标题:React-Native 侧滑容器DrawerLayoutAnd

          本文链接:https://www.haomeiwen.com/subject/pjosdttx.html