React-Native 组件练习-购物app侧滑菜单

本文介绍了如何在React-Native中实现购物App的侧滑菜单,探讨了width和height的100%替代方案,样式设置,Flex布局以及DrawerLayoutAndroid的使用。同时,讲解了不同类型的按钮点击效果和点击事件的绑定方法,提供了完整的代码示例。
摘要由CSDN通过智能技术生成

参照官方例子练习组件的使用,练习View Image Text 还有Android平台的DrawerLayoutAndroid
效果图:
React-Native

React-Native 中的 width,height的 100%

在React-Native 中没有百分比这样的宽高,但是有替代的,具体见 issue
flex:1 相当于 height:100%
alignSelf:'stretch' 相当于 width:100%

React-Native 的style

  • 直接写在View中
<Text style={{fontFamily: 'notoserif', fontStyle: 'italic', fontWeight: 'bold'}}>
NotoSerif Bold Italic
</Text>
  • 使用 StyleSheet.createClass 创建
var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  },
});
  • 以上两种混合
<Text style={[styles.remainder, {color: '#a1a1a1'}]}>
simple text
</Text>

Flex

React-Native中的布局

DrawerLayoutAndroid侧滑菜单

DrawerLayoutAndroid 只在android中,它的 renderNavigationView 代表侧滑菜单内容, 子View代表主界面布局
通过ref={(drawer) => { this.drawer = drawer; }} 获取drawer对象
打开: openDrawer()
关闭: closeDrawer()

<DrawerLayoutAndroid
  drawerWidth={300}
  drawerPosition={DrawerLayoutAndroid.positions.Left}
  ref={(drawer) => { this.drawer = drawer; }}
  renderNavigationView={() => navigationView}>
  <View></View>
</DrawerLayoutAndroid>

按钮的点击效果

根据需要的效果选择

点击函数的触发

定义函数

openDrawer: function () {
    this.drawer.openDrawer();
},

设置点击事件

onPress={this.openDrawer}

完整代码

/**
 * hanks
 * https://github.com/hanks-zyh
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  DrawerLayoutAndroid,
  ProgressBarAndroid,
  ScrollView,
  ListView,
  TouchableOpacity,
} = React;
var AwesomeProject = React.createClass({
  openDrawer: function () {
      this.drawer.openDrawer();
  },
  getInitialState:function(){
    var ds = new ListView.DataSource( {rowHasChanged: (r1, r2) => r1 !== r2} );
    return {
      dataSource : ds.cloneWithRows(['CLOTHES','PACKAGES','SHOES',]),
    }
  },

  render: function() {


    var navigationView = (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Image  source= {{ uri: 'http://img.hb.aicdn.com/735afbfa2f6fee24d1a10e1a22b23c63f707ea82281c3-ajdFRe_fw658' }} style={{  height:200 }} />
        <ListView
          dataSource={this.state.dataSource}
          renderRow={ (rowData) =>
              <View style={{
                height: 56,
                flexDirection : 'row',
                alignItems:'center',
                paddingLeft: 20,
              }}>
                <Image source = { require('./img/list4.png') } style={{ height:10, width:10, margin:8 }}/>
                <Text style={ styles.listItem }>{rowData}</Text>
             </View>
           }
        />
      </View>
    );


    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        ref={(drawer) => { this.drawer = drawer; }}
        renderNavigationView={() => navigationView}
        >
      <ScrollView contentContainerStyle={styles.contentContainer}>
      <View>
        <View style = {{
          backgroundColor: '#f4ec34',
          height:54,
          flexDirection:'row',
          justifyContent:'space-between',
          alignItems:'center',
          paddingLeft: 20,
          paddingRight:20,
        }}>
          <TouchableOpacity onPress={this.openDrawer}>
          <Image  source={require('./img/list4.png')} style={{  width: 20, height: 20}} />
         </TouchableOpacity>
          <Text style={{ fontSize:18,  color:'#484848' }}>SHOP</Text>
          <Image  source={require('./img/search.png')} style={{  width: 20, height: 20}} />
        </View>
        <Image source= {{ uri: 'http://img.hb.aicdn.com/cbf3ebcae08ef62ef02dd61aa2407414dc64e794150313-KRUD1s_fw658' }}
          style={{ height: 220, margin: 20}}  />
        <Text style={{ fontSize:16,  color:'#484848', alignSelf:'center' }}>HOT PRODUCTS</Text>
        <View style={ styles.photoRow }>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1YQAPKVXXXXa9XFXXwu0bFXXX.png_270x270Q90.jpg' }}
            style={ styles.photoItem }  />
            <Text style={styles.photoName }>TEL ORGES</Text>
            <Text style={styles.photoPrice }>$99</Text>
          </View>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1DteFKVXXXXXQapXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={  styles.photoItem  }  />
            <Text style={styles.photoName}>ARFL JUYHS</Text>
            <Text style={styles.photoPrice }>$34.2</Text>
          </View>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1dQGTKVXXXXaaXVXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={ styles.photoItem  }  />
            <Text style={styles.photoName}>TKLL ORGES</Text>
            <Text style={styles.photoPrice }>$182</Text>
          </View>
        </View>
        <Text style={{ fontSize:16,  color:'#484848',  alignSelf:'center' , marginTop:20 }}>NEW COLLECTIONS</Text>
        <View style={ styles.photoRow }>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1rzGNKVXXXXbGXVXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={ styles.photoItem  }  />
            <Text style={styles.photoName}>TEL ORGES</Text>
            <Text style={styles.photoPrice }>$99</Text>
          </View>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1rzGNKVXXXXbGXVXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={ styles.photoItem  }  />
            <Text style={styles.photoName}>ARFL JUYHS</Text>
            <Text style={styles.photoPrice }>$34.2</Text>
          </View>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1uBUxKVXXXXcGXpXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={ styles.photoItem  }  />
            <Text style={styles.photoName}>TKLL ORGES</Text>
            <Text style={styles.photoPrice }>$182</Text>
          </View>
        </View>
        <Text style={{ fontSize:16,  color:'#484848',  alignSelf:'center' , marginTop:20 }}>MOST POP</Text>
        <View style={ styles.photoRow }>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1Rqa3KVXXXXb6XpXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={ styles.photoItem  }  />
            <Text style={styles.photoName}>TEL ORGES</Text>
            <Text style={styles.photoPrice }>$99</Text>
          </View>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1Rqa3KVXXXXb6XpXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={ styles.photoItem  }  />
            <Text style={styles.photoName}>ARFL JUYHS</Text>
            <Text style={styles.photoPrice }>$34.2</Text>
          </View>
          <View>
          <Image source= {{ uri: 'https://gw.alicdn.com/bao/uploaded/TB1lMksKVXXXXa7XpXXSutbFXXX.jpg_270x270Q90.jpg' }}
            style={ styles.photoItem  }  />
            <Text style={styles.photoName}>TKLL ORGES</Text>
            <Text style={styles.photoPrice }>$182</Text>
          </View>
        </View>
      </View>
      </ScrollView>
     </DrawerLayoutAndroid>

    );
  }
});

var styles = StyleSheet.create({
 contentContainer: {
 },
 listItem:{

 },
 photoRow:{
   flexDirection:'row',
   justifyContent: 'space-between',
   paddingLeft: 20,
   paddingRight: 20,
   marginTop:10,
 },
 photoItem:{
   height: 120,
   width:90 ,
   alignItems: 'stretch' ,
   alignSelf:'center'
 },
 photoName:{
   fontSize:14,
   color:'#f39d7f',
   alignSelf:'center',
 },
 photoPrice:{
   fontSize:12,  color:'#484848', alignSelf:'center'
 },

});

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

文章出处:http://hanks.xyz

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值