2019-10-30 15:04:53 weixin_43526443 阅读数 110
  • 完全征服React Native

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

    57824 人正在学习 去看看 李宁

部分自己搜集 部分 来自别的网站

第三方路由插件

react-native-router-flux

react-native-scrollable-tab-view 选项卡

测滑动菜单

react-native-ezsidemenu

react-native-side-menu

react-native-table-component talbe插件

基于react-navigation组件的自定义 head 视图

react-native-carousel 轮播图

react-native-countdown 倒计时

react-native-device-info 设备信息

react-native-fileupload 文件上传

react-native-icons 图标

react-native-image-picker 图片选择器

react-native-keychain iOSKeyChain管理

react-native-picker 滚轮选择器

react-native-picker-Android 安卓滚轮选择器

react-native-refreshable-listview 可刷新列表

react-native-scrollable-tab-view 可滚动标签

react-native-side-menu 侧边栏

react-native-swiper 轮播

react-native-video 视频播放

react-native-viewpager 分页浏览

react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架

react-native-tab-navigator 底部或上部导航框架(不可滑动)

react-native-check-box CheckBox

react-native-splash-screen 启动白屏问题

react-native-simple-router 简易路由跳转框架

react-native-storage 持久化存储

react-native-sortable-listview 分类ListView

react-native-htmlview 将 HTML 目录作为本地视图的控件,其风格可以定制

react-native-easy-toast 一款简单易用的 Toast 组件

react-native-linear-gradient 颜色渐变处理

react-native-login 视频界面登录
react-native-keyboard-aware-scroll-view 键盘显示处理
react-native-popup-dialog 弹窗
react-native-dropdownalert 一种非常漂亮的alert弹窗方式,从状态栏往下弹窗;
react-native-simple-radio-button 单选按钮;
react-native-swiper
react-native-macos macos桌面应用
react-native-wechat 集成微信相关SDK
react-native-modalbox 模态弹窗
react-native-touch-id 指纹登录
react-native-prompt 可输入文字的弹窗
react-native-sqlite-storage sqlite数据库存储
react-native-permissions 权限检查
react-native-progress-hud loading圈
react-native-snackbar 类似toast的弹窗模式
react-native-qrcode-svg 二维码生产工具
native-base UI组件
react-native-busy-indicator loading圈
react-native-fit-image 图片展示优化
react-native-timer 定时器管理
react-native-scrollable-tab-view 可以左右滑动的tab
react-native-zip-archive 解压工具
react-native-xml2js
react-native-spinkit 好看的loading圈
react-native-interactable 有很强交互效果的table视图
react-native-pull-to-refresh 下拉刷新效果
react-native-deck-swiper 不错的swiper效果
react-native-prefix-picker select效果
react-native-gesture-helper 手势 向上还是向下 还是向左
react-native-drawer-layout 抽屉效果
react-native-sortable-listview 可拖拽排序的列表视图
react-native-progress 进度条 长方形 圆形
react-native-splash-screen 启动屏处理
react-native-masked-text 指定格式的输入框
react-native-keyboard-manager 针对IOS 键盘遮挡的问题 俺可以这么用android:windowSoftInputMode=“adjustResize”
react-native-beacons-manager 蓝牙处理
react-native-fetch-blob 文件获取
react-native-popup-menu 弹出菜单
react-native-pathjs-charts 图表
react-native-dates 日历日期选择工具
react-native-calendar-strip 一种简单的日历处理
react-native-simple-markdown 简单的markdown文本编辑器
react-native-image-progress 进度条
react-native-img-cache 图片缓存技术
rn-placeholder 在展示具体的文字和图片之前有个加载样式处理
react-native-pie-chart 饼状图
react-native-maps 地图
react-native-loading-overlay loading圈加载遮罩

路由 react-navigation

底部Tab react-native-tab-navigator

启动页 react-native-splash-screen

滑动/轮播 react-native-swiper(安卓下不能垂直滚动) @nart/react-native-swiper(这个可以垂直滚动)

特别轮播图: react-native-snap-carousel

模态窗口:https://github.com/react-native-community/react-native-modal

显示HTML代码 react-native-render-html

图标 react-native-vector-icons(react-native link react-native-vector-icons) material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, feather or entypo

动画 react-native-animatable

Tab选项卡 react-native-scrollable-tab-view

https://github.com/happypancake/react-native-scrollable-tab-view

签名插件:react-native-signature-capture

大图查看 react-native-image-zoom-viewer

微信(分享、支付等功能): https://github.com/yorkie/react-native-wechat

支付宝: https://github.com/huangzuizui/rn-alipay

文件下载:react-native-fs (react-native link后需要在android/app/build.gradle文件的dependencies加上compile project(’:react-native-fs’))

数据存储: react-native-simple-store(当然选简单的咯) react-native-storage(复杂点)

图片和base64互转 https://github.com/xfumihiro/react-native-image-to-base64

进度条:react-native-progress

自定义下拉刷新样式(ListView):react-native-pull

Toast组件 react-native-easy-toast

毛玻璃效果(图片模糊) react-native-blur

Input被键盘遮挡:react-native-input-scroll-view、react-native-keyboard-aware-scroll-view

下拉放大

react-native-parallax-view

react-native-parallax-scroll-view(这个貌似只有IOS有效?)

分享:react-native-share 【QQ】【QQ空间】【微信】【朋友圈】【微博】【FaceBook】 http://www.lcode.org/react-native-third-share/

底部确认卡 react-native-actionsheet

底部滚轮选择器 https://github.com/beefe/react-native-picker

侧滑出现按钮 react-native-swipeout

全屏正在加载组件 react-native-whc-loading

加载动画 react-native-spinkit

相机/相册选择图片

https://github.com/marcshilling/react-native-image-picker

https://github.com/ivpusic/react-native-image-crop-picker

图表 react-native-charts-wrapper

百度地图 react-native-baidu-map(源码报错) / https://github.com/qiuxiang/react-native-baidumap-sdk(这个在IOS下有点点BUG,可以忽略)

顶部消息 react-native-message-bar

日历组件 react-native-myCalendar 、 react-native-calendars

聊天组件 react-native-gifted-chat

抛物线组件 react-native-parabolic

视频播放 react-native-video

扫描二维码

react-native-barcode-scanner-universal 安卓/IOS

react-native-barcodescanner 安卓

react-native-camera IOS

星星评分 https://github.com/djchie/react-native-star-rating(elements框架里有了)

加密 https://www.npmjs.com/package/crypto-js

Text跑马灯效果 https://github.com/remobile/react-native-marquee-label

侧栏 react-native-side-menu

线性渐变 react-native-linear-gradient

获取设备信息 react-native-device-info

倒计时组件 react-native-CountDowntimer

照片墙 react-native-gallery

A-Z分组列表 react-native-alphabetlistview

文本超链接组件 react-native-hyperlink

侧滑出现按钮 react-native-swipeout

第二部分

选项卡 https://github.com/exponentjs/react-native-tab-navigator

material组件库

https://github.com/xinthink/react-native-material-kit

base组件库

http://nativebase.io/docs/v0.4.6/components#anatomy

https://github.com/GeekyAnts/NativeBase

按钮

https://github.com/mastermoo/react-native-action-button

https://github.com/ide/react-native-button

表单验证

https://github.com/gcanti/tcomb-form-native

https://github.com/FaridSafi/react-native-gifted-form

https://github.com/bartonhammond/snowflake

带动画效果的TextInput

https://github.com/halilb/react-native-textinput-effects

https://github.com/zbtang/React-Native-TextInputLayout

聊天

https://github.com/FaridSafi/react-native-gifted-chat

蓝牙通信

http://blog.csdn.net/withings/article/details/71378562

谷歌地图

https://github.com/lelandrichardson/react-native-maps

高德地图

https://github.com/Eleme-IMF/dodo

时间轴,快递流程图效果

https://github.com/24ark/react-native-step-indicator

https://github.com/thegamenicorus/react-native-timeline-listview

动画效果

https://github.com/oblador/react-native-animatable

加载Loading动画

https://github.com/maxs15/react-native-spinkit

抽屉效果

https://github.com/root-two/react-native-drawer

https://github.com/react-native-fellowship/react-native-side-menu

侧滑按钮

https://github.com/dancormier/react-native-swipeout

https://github.com/jemise111/react-native-swipe-list-view

图表/制图

https://github.com/tomauty/react-native-chart

股票金融

https://github.com/7kfpun/FinanceReactNative

时间组件

https://github.com/xgfe/react-native-datepicker

日历组件

https://github.com/wix/react-native-calendars

电子签名

https://github.com/jgrancher/react-native-sketch

下拉放大(回弹效果)

https://github.com/lelandrichardson/react-native-parallax-view

日历组件

https://github.com/cqm1994617/react-native-myCalendar

https://github.com/vczero/react-native-calendar

多语言

https://github.com/joshswan/react-native-globalize

单选/多选组件

https://github.com/hinet/react-native-checkboxlist

二维码

https://github.com/ideacreation/react-native-barcodescanner

制作本地库

https://github.com/frostney/react-native-create-library

影音相关

https://github.com/MisterAlex95/react-native-record-sound

提示消息(横条Bar)

https://github.com/KBLNY/react-native-message-bar

iOS原生TableView

https://github.com/aksonov/react-native-tableview

点击弹出视图

https://github.com/jeanregisser/react-native-popover

https://github.com/instea/react-native-popup-menu

3D Touch

https://github.com/madriska/react-native-quick-actions

双平台兼容的ActionSheet

https://github.com/beefe/react-native-actionsheet

照片墙

https://github.com/ldn0x7dc/react-native-gallery

键盘遮挡问题

https://github.com/reactnativecn/react-native-inputscrollview

https://github.com/wix/react-native-keyboard-aware-scrollview

本地存储

https://github.com/sunnylqm/react-native-storage

小星星评分(动画效果)

https://github.com/djchie/react-native-star-rating

扫描二维码

https://github.com/lazaronixon/react-native-qrcode-reader

通讯录

https://github.com/rt2zz/react-native-contacts

加密

https://www.npmjs.com/package/crypto-js

清除缓存

https://github.com/reactnativecn/react-native-http-cache

ListView的优化

https://github.com/sghiassy/react-native-sglistview

图片base64转码

https://github.com/xfumihiro/react-native-image-to-base64

白屏问题

https://github.com/mehcode/rn-splash-screen

Text跑马灯效果

https://github.com/remobile/react-native-marquee-label

WebView相关

https://github.com/alinz/react-native-webview-bridge

判断横竖屏

https://github.com/yamill/react-native-orientation

PDF

https://github.com/cnjon/react-native-pdf-view

获取设备信息

https://github.com/rebeccahughes/react-native-device-info

手势放大/缩小/移动

https://github.com/kiddkai/react-native-gestures

https://github.com/johanneslumpe/react-native-gesture-recognizers

上拉-刷新/下拉-加载

https://github.com/FaridSafi/react-native-gifted-listview

https://github.com/jsdf/react-native-refreshable-listview

https://github.com/greatbsky/react-native-pull/wiki

下拉选

https://github.com/alinz/react-native-dropdown

图片查看

https://github.com/oblador/react-native-lightbox

照片选择

https://github.com/marcshilling/react-native-image-picker

https://github.com/ivpusic/react-native-image-crop-picker

图片加载进度条

https://github.com/oblador/react-native-image-progress

轮播视图

https://github.com/race604/react-native-viewpager

https://github.com/FuYaoDe/react-native-app-intro

https://github.com/appintheair/react-native-looped-carousel

https://github.com/leecade/react-native-swiper

模态视图

https://github.com/maxs15/react-native-modalbox

https://github.com/brentvatne/react-native-modal

https://github.com/bodyflex/react-native-simple-modal

毛玻璃效果

https://github.com/react-native-fellowship/react-native-blur

HTML 相关

https://github.com/jsdf/react-native-htmlview

推荐一款最近用到的日历组件(iOS android 两端通用)———–2018-01-25

日历组件

https://github.com/xgfe/react-native-datepicker

下拉选组件(ios,android 两端通用)———2018-01-25

Picker组件

https://github.com/beefe/react-native-picker

短信倒计时(支持后台持续计时) ——2018-04-09

https://github.com/kkkelicheng/ReactNative-CountDownButton

2018-12-13 21:44:23 weixin_36965072 阅读数 907
  • 完全征服React Native

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

    57824 人正在学习 去看看 李宁

查看日志方法:在webStorm输入命令monitor会弹出 ADM 就可以查看log输出了。
tabm

图一

第一种就是用react navigation实现这个tab选项卡切换。
主要用到的api就是createBottomTabNavigator
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);
RouteConfigs是路由配置的映射,就是页面,以{k,v}的形式。
BottomTabNavigatorConfig是选项卡的初始定义,活动标签与非活动标签的颜色,背景色等一系列的配置。

import Home from './ButtomNavigation/Home';
import Fenl from './ButtomNavigation/Fenl';
import Fax from './ButtomNavigation/Fax';
...
const Tabnavigation = createBottomTabNavigator(
{
        Home: Home,
        Fenl: Fenl,
        Fax: Fax,
    },
    tabBarOptions: {
            activeTintColor: 'tomato', //活动tab颜色
            inactiveTintColor: 'gray',  //非活动tab颜色
            activeBackgroundColor:'#2e2e2e'
        },
);
export default createAppContainer(Tabnavigation)

如果只做到这一步,选项卡标签并没有图片,所以要为每个选项卡添加图片
分别在三个页面中加入:

static navigationOptions = {
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('../imag/home_s.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('../imag/home_n.png')}/>
            );
        },
    }

这里的navigationOptions可以设置很多属性:
title:通用标题可以用作备用headerTitle和tabBarLabel。
tabBarVisible:选项卡是否隐藏,默认不隐藏。
tabBarIconL:可以给顶{ focused: boolean, horizontal: boolean, tintColor: string }
如上我只用了一个,而horizontal为true时,每当设备方向改变时都会重新呈现图标。
tabBarButtonComponent:可以包含一个图标。

图二

第二种就要用到添加其他的依赖包了,需要安装 react-navigation-material-bottom-tabs,同样在rn项目的根目录下运行如下代码

npm install react-navigation-material-bottom-tabs react-native-paper

还需要安装react-native-vector-icons,这是个图标库,但是我实践了很多次还是有的图标时问好(?)。官方说法为要使用react-navigation-material-bottom-tabs必须要安装react-native-vector-icons。而我虽然安装了,但是并没有使用这个库的图标。安装方法同样在rn项目下运行如下:

npm install --save react-native-vector-icons

也同样要关联上

react-native link react-native-vector-icons

这个要注意看日志,如果关联不上,需要手动进行配置。查阅资料有很多说这个的。而我也已经测试好几次,每次都成功安装上了,也在android项目中出现了这个:
在这里插入图片描述

这时候又出现了一个react-native-gesture-handler的问题。
h
只要重新安装这个:react-native-gesture-handler,然后关联。
都成功后再看android项目多了两个依赖:
两个依赖
主要api:createMaterialBottomTabNavigator
createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);
参数差不多,代码如下:

import {createMaterialBottomTabNavigator} from "react-navigation-material-bottom-tabs";
import {createStackNavigator, createAppContainer} from "react-navigation";
import Home from './MaterialBottomNavigation/Home';
import Fenl from './MaterialBottomNavigation/Fenl';
import Fax from './MaterialBottomNavigation/Fax';
import My from './MaterialBottomNavigation/My';

const MateriaTab = createMaterialBottomTabNavigator({
    首页: {screen: Home,},
    分类: {screen: Fenl},
    发现: {screen: Fax},
    我的: {screen: My},
}, {
    initialRouteName: '首页',  //默认显示页
    activeColor: '#000000',  //活动图标颜色
    inactiveColor: '#000000',	//非活动图标颜色
    barStyle: {backgroundColor: '#ffffff'}, //底部导航栏样式,在这里并没有什么用
});
export default createAppContainer(MateriaTab)

在每个页面中多了一个属性就可以实现这个涟漪的效果了。

static navigationOptions = {
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('../imag/home_s.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('../imag/home_n.png')}/>
            );
        },
        **tabBarColor:'#ff5e72',** 

    }

这个tabBarColor,我是在每一个页面进行设置的。所以这个颜色就是点击选项卡后重新把所有标签渲染的颜色了,每个页面设置的颜色不一样就会产生每点击一个标签栏背景都不一样的效果了。还是挺好看滴。

2016-04-06 20:43:11 qq_27275015 阅读数 8901
  • 完全征服React Native

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

    57824 人正在学习 去看看 李宁
  1. github上的地址:https://github.com/exponentjs/react-native-tab-navigator
  2. 终端运行:npm install react-native-tab-navigator –save下载
  3. 导入,类似安卓,
    import TabNavigator from 'react-native-tab-navigator';
  4. 在render方法当中使用它:
render() {
        return (
            <View style={styles.container} >
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_home_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_home_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '消息'}
                        title="消息"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_message_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_message_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '消息' })}>
                        <MessageComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '联系人'}
                        title="联系人"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '联系人' })}>
                        <ContactComponent />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }

其中可以自定义选中与未选中text和图标的样式,是不是很方便。
HomeComponent, MessageComponent,ContactComponent为子页面,也要先import
5. styles:

let styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        color: "#000000",
        fontSize: 13
    },
    selectedTabText: {
        color: "#999999",
        fontSize: 13
    },
    icon: {
        width: 20,
        height: 20
    }
});

这样就大功告成了

2019-11-14 11:37:26 weixin_43206949 阅读数 13
  • 完全征服React Native

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

    57824 人正在学习 去看看 李宁

效果图,
支持默认图片,上传中的状态,最大上传数量,预览大图等功能
在这里插入图片描述在这里插入图片描述

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  Modal,
  Platform
} from "react-native";
import { scaleSizeW, setSpText, uploadImag } from "../utils/util";
import ToastBox from "../utils/Toast";
import ActionSheet from "react-native-actionsheet";
import Toast from "../utils/Toast";
import config from "../utils/config";
import ImageViewer from "react-native-image-zoom-viewer";

/*
 * maxNum  (number)上传的最大数量
 * onChange (fun) 返回文件列表arrary
 * actionText  + 下面的文字
 * noRequire  选传
 * initList 已有的图片数组
 */
export default class ImgUpLoad extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flieLists: [],
      visible: false,
      upLoadState: 2 //1上传中 2上传完成
    };
  }
  componentWillMount() {
    const { initList, size } = this.props;
    console.log(initList);
    let flieLists = initList ? initList : [];
    this.setState({
      flieLists
    });
  }
  feedBack = () => {
    // this.props.onChange && this.props.onChange(this.state.flieLists);
    if (this.props.onChange) {
      let arr = [...this.state.flieLists];
      // console.log("feedBack: ",arr)
      this.props.onChange(arr);
    }
  };
  // 打开相册
  selectFromAblum(type) {
    const { userInfo, setUserInfo } = this.props;
    uploadImag(type, image => {
      // const param = `data:${image.mime};base64,${image.data}`;
      console.log(image);
      let maxSize = image.size / 1024 / 1024, // MB
        minSize = image.size / 1024; // KB
      if (maxSize > 1) {
        ToastBox.showTop("图片大小不符合要求,请重新选择");
        return;
      }
      // ToastBox.showTop(`${image.size}`)
      if(Platform.OS=='android'){
        let DateName = new Date().getTime();
        image.filename = DateName + ".jpg";
      }
      
      let file = {
        uri: image.path,
        type: "multipart/form-data",
        name: image.filename
      };
      let formData = new FormData();
      formData.append("file", file);
      this.setState({
        upLoadState: 1
      });
      fetch(config.uploadImg, {
        method: "post",
        body: formData,
        headers: {
          "Content-Type": "multipart/form-data;charset=utf-8"
        }
        // body: JSON.stringify({
        //   base64Str:param
        // }),
      })
        .then(res => {
          console.log(res);
          // console.log(res.text())
          return res.json();
        })
        .then(response => {
          console.log(response);
          if (response.code == 0) {
            this.setState({
              upLoadState: 2
            });
            console.log(response.data.uri);
            let myfile = response.data.uri;
            let flieLists = [...this.state.flieLists];
            flieLists.push(myfile);
            this.setState({ flieLists }, () => {
              this.feedBack();
            });
          }
        })
        .catch(err => {
          console.log(err);
          ToastBox.showTop("图片上传失败,请重试");
          this.setState({
            upLoadState: 2
          });
        });
    });
  }

  takePhoto(type) {
    const { userInfo, setUserInfo } = this.props;
    uploadImag(type, image => {
      // const param = `data:${image.mime};base64,${image.data}`;
      // console.log(param)
      console.log(image);
      let maxSize = image.size / 1024 / 1024, // MB
        minSize = image.size / 1024; // KB
      let filename;
      if (maxSize > 1) {
        ToastBox.showTop("图片大小不符合要求,请重试");
        return;
      }
      // ToastBox.showTop(`${image.size}`)
      let DateName = new Date().getTime();
      filename = DateName + ".jpg";
      let file = {
        uri: image.path,
        type: "multipart/form-data",
        name: filename
      };
      this.setState({
        upLoadState: 1
      });
      let formData = new FormData();
      formData.append("file", file);

      fetch(config.uploadImg, {
        method: "post",
        body: formData,
        headers: {
          "Content-Type": "multipart/form-data;charset=utf-8"
        }
        // body: JSON.stringify({
        //   base64Str:param
        // }),
      })
        .then(res => res.json())
        .then(response => {
          if (response.code == 0) {
            // ToastBox.showTop(`图片上传成功:${JSON.stringify( response)}`)
            let myfile = response.data.uri;
            let flieLists = [...this.state.flieLists];
            flieLists.push(myfile);
            this.setState({ flieLists, upLoadState: 2 }, () => {
              this.feedBack();
            });
          }
        })
        .catch(err => {
          console.log(err);
          ToastBox.showTop("图片上传失败,请重试");
          this.setState({upLoadState: 2})
        });
    });
  }
  // 开打底部选项卡
  showActionSheet = () => {
    if (this.props.maxNum && this.state.flieLists.length >= this.props.maxNum) {
      Toast.show("上传数量达到极限");
      return;
    }
    this.ActionSheet.show();
  };
  // 删除图片
  delImg = index => {
    let flieLists = [...this.state.flieLists];
    flieLists.splice(index, 1);
    console.log(flieLists);
    this.setState({ flieLists: flieLists }, () => {
      this.feedBack();
    });
  };
  render() {
    const { flieLists, visible, upLoadState } = this.state;
    const { maxNum, actionText, size, noRequire, initList } = this.props;
    if (size) {
      let num = scaleSizeW(size);
      console.log(num)
      styles.upLoadItem = { ...styles.upLoadItem, width: num, height: num };
      styles.image = { ...styles.image, width: num, height: num };
    }
    console.log(flieLists);
    return (
      <View style={styles.upLoad}>
        {flieLists.length > 0 &&
          flieLists.map((item, index) => {
            console.log(item);
            const images = [
              {
                // Simplest usage.
                url: item
              }
            ];
            return (
              <TouchableOpacity
                onPress={() => {
                  this.setState({ visible: true });
                }}
                key={index}
                style={styles.upLoadItem}
              >
                <Image source={{ uri: item }} style={styles.image} />
                <Modal
                  style={{ width: "100%", height: "100%" }}
                  visible={visible}
                  transparent
                >
                  <ImageViewer
                    backgroundColor={"rgba(0,0,0,0.8)"}
                    onClick={() => {
                      this.setState({ visible: false });
                    }}
                    imageUrls={images}
                  />
                </Modal>
                <Text
                  style={styles.close}
                  onPress={() => {
                    this.delImg(index);
                  }}
                >
                  {"\ue613"}
                </Text>
              </TouchableOpacity>
            );
          })}
        {/* 超过最大数隐藏上传 */}
        {maxNum > flieLists.length && (
          <TouchableOpacity
            activeOpacity={1}
            onPress={() => {
              this.showActionSheet();
            }}
          >
            {upLoadState == 2 && (
              <View style={[styles.upLoadItem, styles.addBtn]}>
                <Text style={styles.add}>{"\ue612"}</Text>
                <Text style={styles.addText}>
                  {actionText ? actionText : "上传"}
                </Text>
                {noRequire && <Text style={styles.otherText}>(选传)</Text>}
              </View>
            )}
            {upLoadState == 1 && (
              <View style={[styles.upLoadItem, styles.loadingImgWrap]}>
                <Image
                  style={styles.loadingImg}
                  source={require("../assets/image/timg.gif")}
                ></Image>
              </View>
            )}
          </TouchableOpacity>
        )}
        <ActionSheet
          ref={o => (this.ActionSheet = o)}
          options={["拍照", "从相册上传", "取消"]}
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          onPress={index => {
            if (index === 0) {
              this.takePhoto(1);
            } else if (index === 1) {
              this.selectFromAblum(2);
            }
          }}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  upLoad: {
    // width: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
    // paddingLeft: scaleSizeW(20),
    paddingTop: scaleSizeW(20)
    // justifyContent: "flex-start"
  },
  upLoadItem: {
    width: scaleSizeW(204),
    height: scaleSizeW(204),
    borderRadius: scaleSizeW(8),
    borderColor: "#ccc",
    borderWidth: StyleSheet.hairlineWidth,
    justifyContent: "center",
    alignItems: "center",
    marginRight: scaleSizeW(20),
    marginBottom: scaleSizeW(20),
    position: "relative"
  },
  loadingImgWrap: {
    backgroundColor: "#fff"
  },
  loadingImg: {
    width: scaleSizeW(100),
    height: scaleSizeW(100),
    borderRadius: scaleSizeW(8)
  },
  addBtn: {
    borderStyle: "dashed",
    backgroundColor: "rgba(247,250,253,1)"
  },
  image: {
    width: scaleSizeW(204),
    height: scaleSizeW(204),
    borderRadius: scaleSizeW(8)
  },
  add: {
    fontFamily: "iconfont",
    fontSize: setSpText(40),
    color: "#8595A6"
  },
  addText: {
    color: "#FF6737",
    fontSize: setSpText(24),
    textAlign: "center"
  },
  otherText: {
    fontSize: scaleSizeW(24),
    color: "rgba(76,154,255,0.6)",
    marginTop: scaleSizeW(8),
    position: "absolute",
    bottom: scaleSizeW(30),
    left: "50%",
    marginLeft: scaleSizeW(-30)
  },
  close: {
    position: "absolute",
    right: scaleSizeW(12),
    zIndex: 10,
    top: scaleSizeW(12),
    fontSize: setSpText(50),
    fontFamily: "iconfont",
    color: "#999"
  }
});

上传图片,拍照组件

import ImagePicker from 'react-native-image-crop-picker';
/**
 * 上传图片
 * @param callback 上传成功后的回调函数
 */
export function uploadImag(type,callback) {
  if(type==1){
    ImagePicker.openCamera({
      cropping: false,
      compressImageQuality: 0.3,
      includeExif: true
    }).then((image) => {
      callback(image)
    }).catch(err=>{console.log(err)})
  }else if(type==2){
    ImagePicker.openPicker({
      cropping: false,
      compressImageQuality: 0.5,
      includeExif: true
    }).then((image) => {
      callback(image)
    }).catch(err=>{console.log(err)});
  }
}

export function uploadFile(callback) {
  DocumentPicker.show(
    {
      filetype: [DocumentPickerUtil.allFiles()]
    },
    (error, res) => {
      if (error) {
        Toast.message('上传文件失败');
      } else {
        let source = {
          uri: res.uri,
          type: 'multipart/form-data',
          name: res.fileName
        };
        let params = {
          image: source,
          imageFileName: 'images'
        };
        Api.uploadFile(params).then(res => {
          if (res.success) {
            if (typeof callback === 'function') {
              callback(res);
            }
          } else {
            Toast.message('上传图片失败');
          }
        });
      }
    }
  );
}
2017-06-13 13:46:29 lsgqjh 阅读数 1478
  • 完全征服React Native

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

    57824 人正在学习 去看看 李宁

React Native 项目常用第三方组件汇总:
React-native-animatable 动画
react-navigation
github : https://reactnavigation.org/docs/intro/ 路由组件
react-native-carousel && react-native-swiper 轮播
react-native-countdown 倒计时
react-native-device-info 设备信息
react-native-fileupload 文件上传
react-native-icons 图标
react-native-image-picker 图片选择器
react-native-keychain iOS KeyChain管理
react-native-picker滚轮选择器
react-native-picker-Android Android 滚轮选择器
react-native-refreshable-listview 可刷新列表
react-native-scrollable-tab-view 可滚动标签
react-native-side-menu 侧栏
react-native-swiper 轮播
react-native-video 视频播放
react-native-viewpager 分页浏览
react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架
react-native-tab-navigator 底部或上部导航框架(不可滑动)
react-native-check-box CheckBox
react-native-splash-screen 启动白屏问题
react-native-simple-router 简易路由跳转框架
react-native-storage 持久化存储
react-native-sortable-listview 分类ListView
react-native-htmlview 将 HTML 目录作为本地视图的控件,其风格可以定制
react-native-easy-toast 一款简单易用的 Toast 组件,支持 Android&iOS.
* 选项卡 https://github.com/exponentjs/react-native-tab-navigator
点击打开链接
* material组件库(各种漂亮的小组件)https://github.com/xinthink/react-native-material-kit
点击打开链接
* base组件库(各种封装不错的小组件)http://nativebase.io/docs/v0.4.6/components#anatomy
https://github.com/GeekyAnts/NativeBase
点击打开链接
* 不错的按钮
https://github.com/mastermoo/react-native-action-button
https://github.com/ide/react-native-button
* 输入框表单验证
https://github.com/gcanti/tcomb-form-native
https://github.com/FaridSafi/react-native-gifted-form
https://github.com/bartonhammond/snowflake
* 炫酷效果的 TextInput
https://github.com/halilb/react-native-textinput-effects
https://github.com/zbtang/React-Native-TextInputLayout
* 聊天
https://github.com/FaridSafi/react-native-gifted-chat
* 地图
https://github.com/lelandrichardson/react-native-maps
* 动画
https://github.com/oblador/react-native-animatable
* 加载动画
https://github.com/maxs15/react-native-spinkit
* 抽屉效果
https://github.com/root-two/react-native-drawer
https://github.com/react-native-fellowship/react-native-side-menu
* 侧滑按钮
https://github.com/dancormier/react-native-swipeout
https://github.com/jemise111/react-native-swipe-list-view
* 图表
https://github.com/tomauty/react-native-chart
* 下拉放大
https://github.com/lelandrichardson/react-native-parallax-view
* 可滑动的日历组件
https://github.com/cqm1994617/react-native-myCalendar
* 语言转化和一些常用格式转换
https://github.com/joshswan/react-native-globalize
* 单选多选ListView
https://github.com/hinet/react-native-checkboxlist
* 选择按钮
https://github.com/sconxu/react-native-checkbox
* 二维码
https://github.com/ideacreation/react-native-barcodescanner
* 制作本地库
https://github.com/frostney/react-native-create-library
* 影音相关
https://github.com/MisterAlex95/react-native-record-sound
* 安卓录音
https://github.com/bosung90/react-native-audio-android
* 提示消息的Bar
https://github.com/KBLNY/react-native-message-bar
* iOS原生TableView
https://github.com/aksonov/react-native-tableview
* 点击弹出视图
https://github.com/jeanregisser/react-native-popover
https://github.com/instea/react-native-popup-menu
* 3D Touch
https://github.com/madriska/react-native-quick-actions
* 双平台兼容的ActionSheet
https://github.com/beefe/react-native-actionsheet
* 照片墙
https://github.com/ldn0x7dc/react-native-gallery
* 键盘遮挡问题
https://github.com/reactnativecn/react-native-inputscrollview
https://github.com/wix/react-native-keyboard-aware-scrollview
* 本地存储
https://github.com/sunnylqm/react-native-storage
* 星星
https://github.com/djchie/react-native-star-rating
* 国际化
https://github.com/joshswan/react-native-globalize
* 扫描二维码
https://github.com/lazaronixon/react-native-qrcode-reader
* 通讯录
https://github.com/rt2zz/react-native-contacts
* 加密
https://www.npmjs.com/package/crypto-js
* 缓存管理
https://github.com/reactnativecn/react-native-http-cache
* ListView的优化
https://github.com/sghiassy/react-native-sglistview
* 图片和base64互转
https://github.com/xfumihiro/react-native-image-to-base64
* 安卓 iOS 白屏解决
https://github.com/mehcode/rn-splash-screen
* Text跑马灯效果
https://github.com/remobile/react-native-marquee-label
* 清除按钮的输入框
https://github.com/beefe/react-native-textinput
* WebView相关
https://github.com/alinz/react-native-webview-bridge
* 判断横竖屏
https://github.com/yamill/react-native-orientation
* PDF
https://github.com/cnjon/react-native-pdf-view
* 获取设备信息
https://github.com/rebeccahughes/react-native-device-info
* 手势放大缩小移动
https://github.com/kiddkai/react-native-gestures
https://github.com/johanneslumpe/react-native-gesture-recognizers
* 下拉-上拉-刷新
https://github.com/FaridSafi/react-native-gifted-listview
https://github.com/jsdf/react-native-refreshable-listview
https://github.com/greatbsky/react-native-pull/wiki
* 下拉选择
https://github.com/alinz/react-native-dropdown
* 图片查看
https://github.com/oblador/react-native-lightbox
* 照片选择
https://github.com/marcshilling/react-native-image-picker
https://github.com/ivpusic/react-native-image-crop-picker
* 图片加载进度条
https://github.com/oblador/react-native-image-progress
* 轮播视图
https://github.com/race604/react-native-viewpager
https://github.com/FuYaoDe/react-native-app-intro
https://github.com/appintheair/react-native-looped-carousel
https://github.com/leecade/react-native-swiper
* 模态视图
https://github.com/maxs15/react-native-modalbox
https://github.com/brentvatne/react-native-modal
https://github.com/bodyflex/react-native-simple-modal
* 毛玻璃效果
https://github.com/react-native-fellowship/react-native-blur
* 头像库
https://github.com/oblador/react-native-vector-icons
* 滑动选项卡
https://github.com/skv-headless/react-native-scrollable-tab-view
工程目录下终端输入 npm i XXX save

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