2018-10-31 11:02:39 qq934235475 阅读数 883
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57823 人正在学习 去看看 李宁

本教程使用【侧滑组件】 + 【模态层】 实现侧滑显示消息列表并且点击显示消息详情。

模态层基础传送门:https://blog.csdn.net/qq934235475/article/details/82145119


废话不多说,先来效果图 【侧滑的组件效果比较简陋,当然亦可是酷炫的页面(类似qq侧滑等)】:


组件介绍

安装组件:

npm install react-native-side-menu --save

引入组件:

import SideMenu from 'react-native-side-menu';

组件属性:

 

属性 默认值 类型 描述
menu inherited React.Component 内容组件,可以包含一个自定义的组件,用于显示
isOpen false Boolean 抽屉是否打开
openMenuOffset 屏幕2/3 Number 抽屉打开时,占距屏幕的宽度
hiddenMenuOffset none Number 抽屉关闭后,残留占距屏幕的宽度
edgeHitWidth none Number 多远距离滑动可以拉出组件,默认距离60
toleranceX none Number X 轴偏移量
toleranceY none Number Y 轴偏移量
disableGestures false Bool 是否关闭手势滑动
onStartShould
SetResponderCapture
none Function 指定抽屉是否对触摸作出反应,详细请前往https://facebook.github.io/react-native/docs/gesture-responder-system.html
onChange none Function 抽屉打开/关闭时的回调函数
onMove none Function 抽屉拉出时的回调函数,参数为距离,在左为正,在右为负,参考X坐标轴
onSliding none Function 当抽屉滑动时,返回滑动距离在 hiddenMenuOffset 和 openMenuOffset 之间的百分比
menuPosition left String 抽屉显示位置,左侧(left)或者右侧(right)
animationFunction none (Function -> Object) 函数接受两个参数(prop, value) 并返回一个对象
- prop 指定要动画的参数的位置使用
- value 最终值
animationStyle none (Function -> Object) 接受一个参数(值)并返回一个对象的函数:
-你应该在你需要动画参数的地方使用的值(内容视图的左偏移量)
bounceBackOnOverdraw true boolean 当属性为true时,拉动抽屉到openMenuOffset设置的最大值后,会有回弹效果
autoClosing true boolean 当属性为true时,抽屉会在事件发生时自动关闭

代码实现:

    constructor(props) {
        super(props);
        this._rightAction = this._rightAction.bind(this);
        this._closeSideMenu = this._closeSideMenu.bind(this);
        this.state = {
            isOpen: false,
            flag:false,
        }
    }

    _rightAction() {
        this.setState({isOpen: !this.state.isOpen});
    }

    _closeSideMenu(){
        const isOpen = this.state.isOpen;
        const flag = this.state.flag;
        if (isOpen && flag)
            this.setState({isOpen: false, flag: false});
        else if (!isOpen && !flag) {
        } else {
            this.setState({flag: true});
        }
    }

    render() {
        const menu = <BoardList/>;
        return (
            <SideMenu
                menu={menu}
                openMenuOffset={(WINDOW_WIDTH/5)*4}
                menuPosition="right"
                isOpen={this.state.isOpen}
                onChange={this._closeSideMenu}
            >
                <BaseCommonList
                    navigator={this.props.navigator}
                    title={'我的消息'}
                    goBack={false}
                    showSearchBar={true}
                    pageType={'LbBaseMessageUserList'}
                    renderRowExt={this._renderRowExt}
                    rightAction={this._rightAction}
                    rightActionTitle={"公告"}
                    onPress={this._onPress}
                    param={{showStepNumber: false, pageType: 'LbBaseMessageUserList'}}
                />
            </SideMenu>

        );
    }

其中 <BaseCommonList/>是一个自定义的列表组件,基于<ListView/>开发,你当然可以把他换成其他组件。

使用 

<SideMenu>
    <BaseCommonList/>
<SideMenu/>

包含,则此组件(<BaseCommonList/>)就有了一个侧滑的界面(<SideMenu>)。其次,menuData是一个自定义的公告列表,赋值给<SideMenu>组件的属性menu中,即侧滑显示的界面。


BUG延伸:

1,侧滑关闭后,再次回到该 TabBar (消息) 会自动弹出。

造成原因:在这里,增加了一个右上角的“公告”按钮,使其既可以侧滑显示,也可以点击公告按钮显示(通常允许侧滑即可,这里是业务需求)。这时,你使用手势侧滑,关闭没有任何影响,当你点击“公告”按钮显示侧滑后,再点击左侧空白区域关闭,切换TabBar再次进入,则会自动显示侧滑区域。因为点击公告按钮,需要以一个isOpen来进行控制。即点击公告后,isOpen为true,点击左侧空白区域后,并没有置回false,则再次进到该TabBar则会自动显示侧滑。

解决方案:本文代码已经给出解决方案,请参考<SideMenu/>中的onChange方法,即this._closeSideMenu()方法。思路为,在页面初始化时,设置isOpenflag属性为false,此时,点击“公告”按钮,触发onChange方法,isOpenflag均为true,点击左侧空白区域返回时,再次触发onChange方法,此时,isOpenflag均置为false,故从其他界面过来时,不会再自动显示侧滑区域。bingo~


PS:

A,一般来说,侧滑组件位于最左侧TabBar或者最右侧TabBar,否则如果TabBar也可以滑动,会影响用户体验,此处为业务需求。

B,欢迎提出问题一起探讨,共同成长!

2019-05-14 07:57:39 qq_36699930 阅读数 294
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57823 人正在学习 去看看 李宁

SwipeableFlatList

SwipeableFlatList 组件是 rn 0.50 出的 提供android ios 侧滑删除。

在这里插入图片描述
案例:

SwipeableFlatList主要实现代码:

 <SwipeableFlatList
        data={this.state.dataArray}
        renderItem={(data) => this.renderItemView(data)}
      
         //侧滑删除
         renderQuickActions={() => this.quickActions()}
         maxSwipeDistance={100}
         bounceFirstRowOnMount={false} //关闭自动回去
    />
    
    //侧滑删除
    quickActions() {
        return <View style={styles.quickActions}>
            <TouchableHighlight
                onPress={() => {
                    alert("确定删除?")
                }}>
                <View style={styles.quick}>
                    <Text style={styles.text}>删除</Text>
                </View>
            </TouchableHighlight>
        </View>
    }
}


   quickActions: {
        flex: 1,
        marginTop: 15,
        flexDirection: "row",
        justifyContent: "flex-end",
        marginRight: 15,
        marginBottom: 15
    },
    quick: {
        backgroundColor: "red",
        flex: 1,
        alignItems: "flex-end",
        justifyContent: "center",
        padding: 10,
        width: 200

    }

完整代码

import React, {Component} from 'react';
import {
    StyleSheet,
    FlatList,
    SwipeableFlatList,
    SectionList,
    Text,
    View,
    RefreshControl,
    ActivityIndicator,
    TouchableHighlight

} from "react-native";

const CITY_NAMES = ["北京", "上海", "广州", "深圳", "成都", "武汉", "南京", "杭州", "梅州", "中山", "东莞"];

type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false, //默认没有下拉刷新
            dataArray: CITY_NAMES //默认数据
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <SwipeableFlatList
                    data={this.state.dataArray}
                    renderItem={(data) => this.renderItemView(data)}

                    //设置下拉刷新
                    refreshControl={
                        <RefreshControl
                            title={"Loading"} //android中设置无效
                            colors={["red"]} //android
                            tintColor={"red"} //ios
                            titleColor={"red"}
                            refreshing={this.state.isLoading}
                            onRefresh={() => {
                                this.loadData(); //下拉刷新加载数据
                            }}
                        />
                    }

                    //设置上拉加载
                    ListFooterComponent={() => this.renderLoadMoreView()}
                    onEndReached={() => this.loadMoreData()}

                    //侧滑删除
                    renderQuickActions={() => this.quickActions()}
                    maxSwipeDistance={100}
                    bounceFirstRowOnMount={false} //关闭自动回去
                />
            </View>

        );
    }

    //条目布局
    renderItemView(data) {
        return <View style={styles.item}>
            <Text style={styles.text}>{data.item}</Text>
        </View>
    }

    //下拉刷新数据
    loadData() {
        this.setState({
            isLoading: true
        })

        //模拟网络请求
        setTimeout(() => {
            //把数据反转
            let newArray = [];
            for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
                newArray.push(this.state.dataArray[i]);
            }
            this.setState({
                isLoading: false,
                dataArray: newArray
            })

        }, 3000);
    }

    //上拉加载布局
    renderLoadMoreView() {
        return <View style={styles.loadMore}>
            <ActivityIndicator
                style={styles.indicator}
                size={"large"}
                color={"red"}
                animating={true}
            />
            <Text>正在加载更多</Text>
        </View>
    }

    //上拉加载更多数据
    loadMoreData() {
        //模拟网络请求
        setTimeout(() => {
            let newArray = [];
            for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
                newArray = this.state.dataArray.concat(CITY_NAMES)
            }
            this.setState({
                dataArray: newArray
            })

        }, 3000);
    }

    //侧滑删除
    quickActions() {
        return <View style={styles.quickActions}>
            <TouchableHighlight
                onPress={() => {
                    alert("确定删除?")
                }}>
                <View style={styles.quick}>
                    <Text style={styles.text}>删除</Text>
                </View>
            </TouchableHighlight>
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        backgroundColor: "#169",
        height: 100,
        margin: 15,
        justifyContent: "center",
        alignItems: "center"
    },
    text: {
        color: "white",
        fontSize: 20,
    },

    loadMore: {
        alignItems: "center"
    },
    indicator: {
        color: "red",
        margin: 10
    },
    quickActions: {
        flex: 1,
        marginTop: 15,
        flexDirection: "row",
        justifyContent: "flex-end",
        marginRight: 15,
        marginBottom: 15
    },
    quick: {
        backgroundColor: "red",
        flex: 1,
        alignItems: "flex-end",
        justifyContent: "center",
        padding: 10,
        width: 200

    }
});

效果图

在这里插入图片描述

2018-08-23 20:38:24 qq_22329521 阅读数 1240
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57823 人正在学习 去看看 李宁

react-native 侧滑组件SwipeableFlatList 单项侧滑解决

SwipeableFlatList 组件是 rn 0.50 出的 提供android ios 侧滑删除

效果如下
这里写图片描述
//ui 网上copy代码
ui 参考https://blog.csdn.net/yu_m_k/article/details/80580250 拷贝下来的

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, SwipeableFlatList, TouchableHighlight } from 'react-native';

const CITY_NAMES = ['北京', '上海', '广州', '杭州', '苏州'];
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <SwipeableFlatList
          //1数据的获取和渲染
          data={CITY_NAMES}
          renderItem={(data) => <View style={styles.item}>
            <Text style={styles.text}>{data.item}</Text>
          </View>}

          //2创建侧滑菜单
          renderQuickActions={() => this.getQuickActions()}//创建侧滑菜单
          maxSwipeDistance={80}//可展开(滑动)的距离
          bounceFirstRowOnMount={false}//进去的时候不展示侧滑效果
        />
      </View>
    );
  }
  //侧滑菜单渲染
  getQuickActions = () => {
    return <View style={styles.quickAContent}>
      <TouchableHighlight
        onPress={() => alert("确认删除?")}
      >
        <View style={styles.quick}>
          <Text style={styles.delete}>删除</Text>
        </View>
      </TouchableHighlight>
    </View>
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#aeffb1',
    height: 100,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 10,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 5,//漂浮的效果
    borderRadius: 5,//圆角
  },
  text: {
    color: '#444444',
    fontSize: 20,
  },
  //侧滑菜单的样式
  quickAContent: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginRight: 15,
    marginBottom: 10,
  },
  quick: {
    backgroundColor: "#ff1d49",
    flex: 1,
    alignItems: 'flex-end',//水平靠右
    justifyContent: 'center',//上下居中
    width: 100,
    borderRadius: 5,
    elevation: 5,//漂浮的效果

  },
  delete: {
    color: "#d8fffa",
    marginRight: 30
  }
});

bug点在于 该组件api 说明不提供关闭侧滑功能 以及只支持单个侧滑(及打开一个侧滑关闭上面的侧滑)
分析源码

在node_modules/react-native/Libraies/Experimental/SwipeableRow/ 下面


SwipeableFlatList
看到 render 仍是FlatList 看到他里面renderItem

_renderItem = (info: Object): ?React.Element<any> => {

    const slideoutView = this.props.renderQuickActions(info);
    const key = this.props.keyExtractor(info.item, info.index);

//就有无侧滑
    // If renderQuickActions is unspecified or returns falsey, don't allow swipe
    if (!slideoutView) {
      return this.props.renderItem(info);
    }

    let shouldBounceOnMount = false;
    if (this._shouldBounceFirstRowOnMount) {
      this._shouldBounceFirstRowOnMount = false;
      shouldBounceOnMount = true;
    }

    return (
      <SwipeableRow
        slideoutView={slideoutView}
        //这里我们看到他实际上是每个打开关闭都是有的但是flatlist不刷新 
        isOpen={key === this.state.openRowKey}
        maxSwipeDistance={this._getMaxSwipeDistance(info)}
        onOpen={() => this._onOpen(key)}
        onClose={() => this._onClose(key)}
        shouldBounceOnMount={shouldBounceOnMount}
        onSwipeEnd={this._setListViewScrollable}
        onSwipeStart={this._setListViewNotScrollable}>
        {this.props.renderItem(info)}
      </SwipeableRow>
    );
  };
 _onOpen(key: any): void {
    this.setState({
      openRowKey: key,
    });
  }

  _onClose(key: any): void {
    this.setState({
      openRowKey: null,
    });
  }
在 SwipeableRow组件中

UNSAFE_componentWillReceiveProps(nextProps: Object): void {
    /**
     * We do not need an "animateOpen(noCallback)" because this animation is
     * handled internally by this component.
     */
     也是做了isOpen 更新会出处罚这关闭item
    if (this.props.isOpen && !nextProps.isOpen) {
      this._animateToClosedPosition();
    }
  },

看了什么实际上SwipeableFlatList 是做了只支持单项了操作但是为什么能开启多个侧滑那
原因在于flatlist 的data 是数组引用问题 data如果引用不变是不会触发flatlist的刷新

这里就需要用到一个 flatlist extraData 的属性

extraData
如果有除data以外的数据用在列表中(不论是用在renderItem还是头部或者尾部组件中),请在此属性中指定。同时此数据在修改时也需要先修改其引用地址(比如先复制到一个新的 Object 或者数组中),然后再修改其值,否则界面很可能不会刷新。

我们修改源码

 render(): React.Node {
    return (
      <FlatList
        {...this.props}
        ref={ref => {
          this._flatListRef = ref;
        }}
        //就加入这行效果就可行了
        extraData={{
          ...this.state,
          ...this.props.extraData
        }}
        onScroll={this._onScroll}
        renderItem={this._renderItem}
      />
    );
  }

这里我们封装一个新的SwipeableFlatList 来避免修改源码的方式

import { SwipeableFlatList, FlatList } from 'react-native'
import React from 'react'

export default class fixSwipeadFlatList extends SwipeableFlatList {
    render(): React.Node {
        return (
            <FlatList
                {...this.props}
                ref={ref => {
                    this._flatListRef = ref;
                }}
                extraData={this.state}
                onScroll={this._onScroll}
                renderItem={this._renderItem}
            />
        );
    }
}

还有 当你单击完手动关闭侧滑 我们看到 SwipeableFlatList 是提供了 我们自己使用引用去手动调关闭方法

_onClose(key: any): void {
    this.setState({
      openRowKey: null,
    });

手动关闭侧滑

<SwipeableFlatList
          //1数据的获取和渲染
          data={CITY_NAMES}
          renderItem={(data) => <View style={styles.item}>
            <Text style={styles.text}>{data.item}</Text>
          </View>}
 ref={ref => {
  this._flatListRef = ref;
}}
          //2创建侧滑菜单
          renderQuickActions={() => this.getQuickActions()}//创建侧滑菜单
          maxSwipeDistance={80}//可展开(滑动)的距离
          bounceFirstRowOnMount={false}//进去的时候不展示侧滑效果
        />

  <TouchableHighlight
        onPress={() =>this._flatListRef._onClose()}
      >
        <View style={styles.quick}>
          <Text style={styles.delete}>删除</Text>
        </View>
      </TouchableHighlight>

//如有理解有误 敬请谅解

2017-08-02 17:31:16 u011272795 阅读数 4800
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57823 人正在学习 去看看 李宁

一。由于项目需要支持左滑&右滑的list组件,所以上网看了一下,发现了 react-native-swipe-list-view 觉得不错,分享给大家。

(1).此库支持单个组件的左滑右滑,也支持list组件的左滑右滑

首先看一下效果图:


1.支持左滑和右滑,

2.支持设置禁止左滑和右滑。

3.list组件支持点击其他item时关闭当前item左滑/右滑等等。

二。使用

1. 安装

npm install --save react-native-swipe-list-view

yarn add react-native-swipe-list-view


2.使用

/**
 * Created by zhuoyuan93@gmail.com on 2017/7/2.
 */

import React from 'react';
import {
    View,
    Text,
    ListView,
    StyleSheet,
    TouchableOpacity
} from 'react-native';
import {SwipeListView, SwipeRow} from 'react-native-swipe-list-view';

export default class Item extends React.PureComponent {


    render() {
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        const dataSource = ['a', 'b', 'c'];
        return (
            <View style={styles.outView}>

                <SwipeRow
                    leftOpenValue={75}
                    rightOpenValue={-75}
                    disableRightSwipe={true}   //禁止向右滑动
                >
                    <View style={styles.rowBack}>

                        <Text allowFontScaling={false}>加入</Text>
                        <Text allowFontScaling={false}>购物车</Text>

                    </View>
                    <View style={{alignItems: 'center', backgroundColor: '#CCC', height: 50, justifyContent: 'center'}}>
                        <Text>I am a standalone SwipeRow</Text>
                    </View>
                </SwipeRow>

                <View style={{height: 20}}/>

                <SwipeListView
                    dataSource={ds.cloneWithRows(dataSource)}
                    renderRow={ data => (
                        <View style={styles.rowFront}>
                            <Text>I am {data} in a SwipeListView</Text>
                        </View>
                    )}

                    renderHiddenRow={ data => (
                        <View style={styles.rowBack}>
                            <TouchableOpacity onPress={() => alert('left')}>
                                <View style={styles.leftView}>
                                    <Text style={{backgroundColor: 'red'}}>Left</Text></View>
                            </TouchableOpacity>
                            <View style={styles.leftView}>
                                <Text style={{backgroundColor: 'red'}}>Right</Text></View>
                        </View>
                    )}
                    leftOpenValue={75}
                    rightOpenValue={-75}
                />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    outView: {
        flex: 1,
        marginTop: 22
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: '#DDD',
        flexDirection: 'row',
        justifyContent: 'space-between',
        flex: 1
    },
    rowFront: {
        alignItems: 'center',
        backgroundColor: '#CCC',
        borderBottomColor: 'black',
        borderBottomWidth: 1,
        justifyContent: 'center',
        height: 50,
    },
    leftView: {
        width: 75,
        alignItems: 'center',
        backgroundColor: 'green',
        height: 50,
        justifyContent: 'center'
    }
})

手动关闭rows

在使用的时候如果需要 关闭row,可以使用以下方法调用closeRow()方法关闭row:

<SwipeList
    renderHiddenRow={ (data, secdId, rowId, rowMap) => {
        <TouchableOpacity onPress={ _ => rowMap[`${secId}${rowId}`].closeRow() }>
            <Text>I close the row</Text>
        </TouchableOpacity>
    }}
/>

rowMap是一个object,结构如下:

{
    row_hash_1: ref_to_row_1,
    row_hash_2: ref_to_row_2
}

每一个row_hash是一个<section_id><row_id>结构的字符串

如果你使用的是一个单独的<SwipeRow>,你一个通过定义ref去调用closeRow()关闭row


<SwipeRow>的属性:

  • leftOpenValue
  • rightOpenValue
  • stopLeftSwipe
  • stopRightSwipe
  • closeOnRowPress
  • disableLeftSwipe
  • disableRightSwipe
  • recalculateHiddenLayout






2019-01-31 09:58:00 weixin_30236595 阅读数 18
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57823 人正在学习 去看看 李宁
侧滑功能
react-native-swipe-list-view list列表有操作按钮

转载于:https://www.cnblogs.com/boonook/p/10340665.html

没有更多推荐了,返回首页