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

最新推荐文章于 2024-07-17 15:08:27 发布
最新推荐文章于 2024-07-17 15:08:27 发布
阅读量3.5k 收藏 2
点赞数 1
文章标签： app React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hpu_zyh/article/details/50408405
版权
本文介绍了如何在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

Hanks-zyh
关注
react native 侧滑菜单
11-23
react native 侧滑菜单：支持3种侧滑动画，支持iOS&android;
react-native-clear-app-cache:清理app缓存 React-Native模块封装 支持iOSAndroid
05-10
README Author  E-mail gufei react-native-clear-app-cache 功能介绍 支持 iOS Android 清理app缓存 安装使用 npm install --save react-native-clear...react-native link react-native-clear-app-cache 运行示例
ReactNative 侧滑菜单的实现
滴水可以穿石 百炼才能成钢，谋全局而通一域 致广大而尽精微
11-11 2582
侧滑菜单在App的框架结构非常常见和实用,本篇博客,是用reactNative实现了一个侧滑的基本的框架,但具体的菜单栏需要各位看官的去自行添加了 实现的思路 tab+定时器+Animated.View的方式 import React, { Component, PropTypes } from 'react' import { View, Text, StyleSheet
无涯教程-React Native - 抽屉导航
最新发布
无涯教程
07-17 573
React Native Drawer Navigation是一个UI面板，显示应用程序的导航菜单。默认情况下，它在不使用时是隐藏的，但是当用户从屏幕边缘滑动手指或触摸应用栏上添加的抽屉图标顶部时，它就会显示。React Native Drawer Navigation从react-navigation库导入createDrawerNavigator。importfrom它实现了createDrawerNavigator()来添加类列表。要打开和关闭抽屉，请使用以下帮助方法:this。
react native练习
dnie9828的博客
01-03 124
import React, { Component } from 'react' import { Platform, StyleSheet, Text, View,Image ,FlatList} from 'react-native' // import { createBottomTabNavigator,createStackNavigator, createAppCon...
native react 二级菜单_react-native + teaset（Drawer）实现侧边菜单
weixin_39542889的博客
12-19 136
1.代码/*** 购物车*/import React, {Component} from 'react';import {View,Image,} from 'react-native';import { BaseContainer } from '../../../components';import Icon from 'react-native-vector-icons/Ionicons';...
React Native_综合练习(react-navigation)
十二指环的博客
06-29 347
据说，react-natvigation是官方推荐使用的，搞不懂为啥官方放弃更新natigator了。所以在上篇文章的基础上使用react-natvigation。 （1）StackNavigator：用来跳转页面和传递参数 （2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面 （3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕 ...
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑，路况，室内地图 内置...
react-native-blur：React Native Blur组件
02-05
@react-native-community/blur 一种UIVisualEffectView的iOS上的模糊和活力的效果，和组件在Android上。 内容 安装 使用Yarn安装库： yarn add @react-native-community/blur 或npm： npm install --save @react-...
react-native-star-rating：一个React Native组件，用于生成和显示交互式星级
02-05
安装react-native-star-rating及其依赖 npm install react-native-star-rating --save 要么 yarn add react-native-star-rating 链接react-native-vector-icons 请参考 用法 道具 Struts 类型 描述 需要 默认 ...
reactnativesideslip可以让任意view支持侧滑菜单
08-11
react-native-sideslip：可以让任意view支持侧滑菜单
react-native-sidebar
05-09
React本机侧边栏 一个基于Animated的侧边栏（也称为抽屉）解决方案。 在测试了其他几种具有不同陷阱的侧边栏实现之后，我们决定基于react-native 框架实现一个干净，易于使用且可正常使用的侧边栏。 入门 npm install --save react-native-sidebar 用法： import Sidebar from 'react-native-sidebar' ; render ( ) { return ( < Sidebar xss=removed xss=removed> this . _drawer = ref } leftSidebar = { this . renderLeftSidebar ( ) } rightSidebar = { this . renderRightSidebar ( ) } style = {
react-swipeable-list：React的可滑动列表组件，支持多种行为（例如，iOS）
02-12
React可刷清单 一个React组件，用于渲染带有可滑动项的列表。 •• React可滑动列表组件 一个React组件，用于渲染带有可滑动项的列表。 物品在向左（前导）和向右（尾随）滑动时可以有一个或多个动作，并且根据道具的不同行为。 演示版 检查 安装 npm install react-swipeable-list # or via yarn yarn add react-swipeable-list 用法 import { LeadingActions , SwipeableList , SwipeableListItem , SwipeAction , TrailingActions , } from ' react-swipeable-list ' ; import ' react-swipeable-list/dist/styles.css ' ; co
android 侧滑菜单动画,react native 侧滑菜单：支持3种侧滑动画，支持iOS&android
weixin_39563722的博客
05-26 245
项目介绍：react-native-ezsidemenu源码地址：https://github.com/easyui/react-native-ezsidemenu简单易用的，支持侧滑和自定义的react native菜单组件。 支持iOS和android。安装$ npm install react-native-ezsidemenu --save预览default 类型 overlay 类型 s...
探索React Native Side Menu: 一款强大的侧滑菜单组件
gitblog_00006的博客
04-09 356
探索React Native Side Menu: 一款强大的侧滑菜单组件 react-native-side-menu项目地址:https://gitcode.com/gh_mirrors/reac/react-native-side-menu 在移动应用开发中，侧滑菜单已经成为了设计中的常用元素，它为用户提供了一种方便的方式来访问和切换不同功能模块。今天，我们要介绍的是，一个专门为React...
React Native的学习之小练习-登录页
zoepriselife316的博客
11-08 252
在项目中，有ios和Android的区别，不同的设备显示的内容也会有些差异，所以，布局时有时要改不同的样式才能显示一样的效果，所以可以把两个文件都映射到一个文件中只修改一个文件就可以达到这样的效果。先新建一个login.js.内容如下： /** * Sample React Native App * https://github.com/facebook/react-native * @fl...
react-native-ezsidemenu 侧滑菜单组件
唤起鱼的记忆
12-03 446
react-native-ezsidemenu 侧滑菜单组件 1、组件描述： react-native-ezsidemenu是基于react native的一款侧滑菜单组件，支持iOS和Android。详细使用方法参考地址：（1）react-native-ezsidemenu组件 2、组件使用： （1）先安装react-native-ezsidemenu $ npm install rreact-native-ezsidemenu --save （2）导入react-native-ezsidemenu im
ReactNative学习实例（六）DrawerLayoutAndroid（侧滑菜单）
zhang___yong的博客
03-05 573
DrawerLayoutAndroid的子组件作为视图的主要内容，通过他的renderNavifationView来渲染侧滑菜单。 DrawerLayoutAndroid主要有三个属性： 1.drawerPosition，菜单从哪边滑出，接收几个常量：DrawerLayoutAndroid.positions.Left表示在左边，默认左边 2.drawerWidth:菜单宽度，没有必要设
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值