reactnative总结_reactnative - CSDN
  • 撸完react-native的感受 关于RN的介绍就不多说了,已经好几年了,如今RN的生态圈也已经很成熟了,基本配套的UI和插件,95%都能找到,如果你有react的基础,1-2天内上手是没有问题的,如果你没有接触过react,可能...
    关于RN的介绍就不多说了,已经好几年了,如今RN的生态圈也已经很成熟了,
    基本配套的UI和插件,95%都能找到,如果你有react的基础,1-2天内上手是
    没有问题的,如果你没有接触过react,可能需要几天时间适应它的写法,除了对
    于前端开发的来说,配置安卓开发环境麻烦点,可能一部分小伙伴,因为这个配
    置环境问题就放弃了,window系统有点麻烦,mac系统1小时左右吧,网速快的话
    加上爬梯子,估计用不了1小时。但如果你真想学这个东西,就必须待过这一关!
    
    关于RN的基础组件,熟记的有Text文本组件,image 组件,View组件,这几个是最常用的,基本写的最多的
    就是View组件,样式呢最常用的就是flex布局!
    
    首先,如果你是第一次写RN,或者需要你自己搭项目架子干活,你就要考虑这个架子结构了,以及选择什么UI了,
    要考虑路由跳转,还要考虑你项目要不要使用redux,与后台对接用哪个网络请求,本地存储,
    公共组件封装复用性等.
    
    不对RN技术好不好用做任何评价,每个人的用过后的感受不同,不要纠结是用RN,flutter,
    weex,nativescript啊,反正不是很推荐后两个,你可以在RN 和 flutter 中选择一个
    

    基础视频教程:

    https://search.bilibili.com/all?keyword=react native&from_source=banner_search

    实战项目

    https://coding.imooc.com/class/89.html(账号:15138798639,密码:qin15138)

    ## 源码目录结构(给第一次搭RN架子的小伙伴一个参考)

    |-- android
    
    ​    |-- bundles
    
    ​    |-- ios
    
    ​    |-- node_modules
    
    ​    |-- src                        // 项目源代码目录,文件名也可以写 lib|-- router                  // 配置所有路由|-- icons                   // 放置本地所有的icon图标|-- imgs                    // 放置本地图片|-- components              // 放置公共组件|-- theme                   // 配置的皮肤 ,根据项目需要自己选择|-- utils                   // 封装所有的工具函数|-- redux                   // 数据仓库(这几个文件是把redux进行拆分)|-- actions.js                 
    
    ​            |-- reducers.js                
    
    ​            |-- store.js                   
    
    ​            |-- types.js        
    
    ​        |-- views                   // 所有的页面(这里你可以根据功能再继续划分)你也可以用pages|-- home                    // 首页|-- list                    // 列表|-- shopcar                 // 购物车|-- myself                  // 个人中心|-- App.js                          // 跟组件
    

    配置android,ios 快速启动,再package.json 中

      "scripts": {
        "start": "react-native run-android",
        "ios": "react-native run-ios",
      },
    

    运行

    // 安卓
    # npm start
    // ios
    # npm run ios
    

    路由选择

    官方推荐
    https://reactnavigation.org/docs/zh-Hans/navigation-views.html
    
    第三方封装
    https://github.com/aksonov/react-native-router-flux
    
    关于以上两个路由,个人推荐使用官方推荐的路由,第二个封装好的虽然也很好用,但还是有一个连点触发同一个屏幕出现两次的问题
    

    官方路由 单独抽离出来的实例

    在router 文件夹下的 index.js中,

    安装 ... 省略
    
    // 将所有的路由单独抽离出一个单独的文件
    
    import { createStackNavigator, createAppContainer } from "react-navigation";
    // createStackNavigator  是一个返回 React 组件的方法
    
    import Home from './Home'
    import Find from './Find'
    
    // 第一种写法
    // const AppNavigator = createStackNavigator({ 
    //   Home: { screen: Home } 
    // });
    
    /**
     * 简写
     */
    // createStackNavigator是一个函数,它接受一个路由配置对象和一个可选对象并返回一个 React 组件。
    // 路由配置对象中的key是路由名称,value是该路由的配置。 配置中唯一必须的属性是screen(用于路由的组件)。
    const AppNavigator = createStackNavigator(
      {
        Home,
        Find
      },
      {
        initialRouteName: "Home",
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#f4511e',
          },
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }
    );
    
    export default createAppContainer(AppNavigator);
    
    

    路由挂载(注意引入路径)

    import React, { Component } from 'react'
    import Router from './view/router'
    class App extends Component {
      render() {
        return (
          <Router />
        )
      }
    }
    export default App;
    

    路由跳转(注意防重复点击出现多个相同的屏幕)

    // 这种跳转方法,不会触发多次点击跳转相同的路由地址,它只会执行一次,向路由栈中推入路由
    this.props.navigation.navigate('路由的key值')
    
    // 这种跳转方法,我们会向导航堆栈中添加新路由,
    // 多次点击跳转同一个路由,每次都会触发跳转到要调入的路由,会多次执行想路由栈添加路由
    this.props.navigation.push('路由的key值')
    
    // 返回上一级页面
    this.props.navigation.goBack()
    

    路由传参

      /**
       * 需要将参数包装成一个对象,作为navigation.navigate方法的第二个参数传递给路由。
       * 如: * this.props.navigation.navigate('RouteName', { params go here  })
       * 
       * 读取页面组件中的参数的方法:this.props.navigation.state.params。
       */
    
        // 1.第一种传参
          this.props.navigation.navigate('Find', {
            obj:{
                  itemId: 86,
                  otherParam: 'anything you want here',
                }
          })
        //  第一种传参,取参数
          this.props.navigation.getParam('obj')
    
      // 第二种传参
      this.props.navigation.navigate('Find', {
                itemId: 86,
                otherParam: 'anything you want here',
              })
        // 第二种传参 取参数
        this.props.navigation.state.params
    
        // 3 如果你想通过 prop 直接访问 params(例如: this.props.itemId)而不this.props.navigation.getParam,您可以使用社区开发的 react-navigation-props-mapper软件包。
    
        /**
        navigate接受可选的第二个参数,以便将参数传递给要导航到的路由。 例如:this.props.navigation.navigate('RouteName', {paramName: 'value'})。
        我们可以使用this.props.navigation.getParam读取参数
        你也可以使用 this.props.navigation.state.params作为getParam的替代方案, 如果未指定参数,它的值是 null。
        */
    

    路由配置顶部导航

      // 导航上的文字直接在各自的组件中
      // 配置title属性,值可以是个字符串,也可以是个组件 
      class Home extends React.Component {
        static navigationOptions = {
          title: 'Home',
        };
        /* render function, etc */
      }
    
      /**
       * 在标题中使用参数  
      */
      class DetailsScreen extends React.Component {
        static navigationOptions = ({ navigation }) => {
          return {
            title: navigation.getParam('otherParam', 'A Nested Details Screen'),
          };
        };
        /* render function, etc */
      }
    
      /**
       * 使用setParams更新navigationOptions(导航上的配置),用this.props.navigation.setParams来做到这一点
      */
        /* Inside of render() */
        <Button
          title="Update the title"
          onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
        />
      /**
       * 调整标题样式
       * headerStyle:一个应用于 header 的最外层 View 的 样式对象, 如果你设置 backgroundColor ,他就是header 的颜色。
      headerTintColor:返回按钮和标题都使用这个属性作为它们的颜色。 在下面的例子中,我们将 tint color 设置为白色(#fff),所以返回按钮和标题栏标题将变为白色。
      headerTitleStyle:如果我们想为标题定制fontFamily,fontWeight和其他Text样式属性,我们可以用它来完成。
      */
      // 只再当前路由有效果
      class HomeScreen extends React.Component {
        static navigationOptions = {
          title: 'Home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        };
    
        /* render function, etc */
      }
    
      // 一次配置受用终身,再路由的全局上配置
      const AppNavigator = createStackNavigator(
    
        {
          defaultNavigationOptions: {
            headerStyle: {
              backgroundColor: '#f4511e',
            },
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        },
    
      );
    

    关于与后台对接,使用featch封装 get – post (参考例子)
    关于过期处理,请求延时自己处理

        // 定义一个常量,用来切换测试包和正是包的接口地址
        const dev = "你的接口地址";
        /**
             * @class Http   api接口类
             * @method get || post   get/post请求方法
             * @param  {url:'传入的url',params:“传入的参数,一般是个对象”}
             *
            */
        export default class Http {
            // 静态方法 get请求
            static get(url, params) {
                url = dev + url;
                console.log(url);
                //判断有木有参数
                if (params) {
                    // 定一个空数组
                    let paramsArray = [];
                    //  拆分对象
                    Object.keys(params).forEach(key =>
                        paramsArray.push(key + "=" + params[key])
                    );
                    //判断是否地址拼接的有没有 ?,当没有的时候,使用 ?拼接第一个参数果有参数拼接,则用&符号拼接后边的参数           
                    if (url.search(/?/) === -1) {
                        url = url + "?" + paramsArray.join("&");
                    } else {
                        url = url + "&" + paramsArray.join("&");
                    }
                }
                // 返回一个promise
                return new Promise((resolve,reject) => {
                    //fetch请求
                    fetch(url, { method: "GET" })
                        .then(response => response.json())
                        .then(result => {
                            resolve(result);
                        })
                        .catch(error => {
                            reject(error);
                        });
                    });
            }
            //  post请求封装
            static post(url, obj) {
                url = dev + url;
                // console.log(url)
                return new Promise((resolve, reject) => {
                    fetch(url, {
                            method: "POST",
                            headers: {
                            "Content-Type": "application/json"
                            },
                            body: JSON.stringify(obj)
                        })
                        .then(response => response.json())
                        .then(result => {
                            // console.log(result)
                            resolve(result)
                        }).catch(error=>{
                            reject(error)
                        });
                });
            }
        }
    

    调用 方法

    // 先倒入这个js文件
    import js_name from '你的文件路径'
    // 在你获取接口数据的函数中调用静态方法
    js_name.get();    // get请求获取数据
    js_name.post();   // post请求传数据 
    

    UI库选择(直接github 搜吧,不放链接地址了)

    teaset						// 国人开发的中文版文档的UI库,功能简单,不过弹窗有点坑
    mobile.ant.design			// 阿里开源的的带有中文版文档的一个UI库,但属于个人开发的,star数不高
    react-native-ui-kitten		// 外国人开发的UI库,英文文档
    react-native-paper			// 高仿谷歌material风格的UI库
    react-native-material-ui	// 仿谷歌material风格的UI库
    eact-native-elements		// 社区开发的一个UI,start数很高,然而组件并不是很丰富
    

    插件总结(直接在github 上 或者npm 上搜吧)

    react-native-vector-icons					// RN图标库
    react-native-image-pickerRN					// 调用相机和相册
    react-native-app-intro						//RN的闪屏页,基于react-native-swiper组件再开发
    react-native-shadow							//RN阴影处理
    react-native-scrollable-tab-view			//RN中扁平风格的Tab选项卡
    react-native-blur							//RN中四周圆角的Tab选项卡
    react-native-popup-dialog					//RN 弹出框
    react-native-image-crop-picker				//RN全屏查看图片
    react-native-gifted-form					//RN表单插件
    gl-react-native-v2							//RN背景色渐变,让图片以不同的动画方式展示出来,图片虚化等
    react-native-calendars						//RN 日历插件
    react-native-swipeout			//RN中iOS风格的swipeout按钮,可以实现滑动后,在右侧或左侧出现几个按钮
    react-native-textinput-effects	// RN中带动画风格的输入框
    react-native-modalbox			// RN中可以下滑关闭的弹窗,支持多种弹窗位置
    react-native-lightbox			// RN中点击某个图片||盒子后进入全屏
    react-native-splash-screen		// RN中的启动画面,在加载应用程序时隐藏
    react-native-action-button		// RN中可定制多动作的按钮,包括按钮旋转
    react-native-foldview			// RN中可折叠的列表块
    react-native-spinkit			// RN中动画的loading
    react-virgin					// RN中底部导航tab切换
    react-native-parallax-scroll-view		// RN中向上滑动列表时,隐藏顶部的某个块级盒子,向下滑动时,动画放大的形式显示隐藏的元素
        react-native-tableview			// RN中列表组件
    react-native-keyboard-spacer		// 解决RN中ios上的键盘遮挡输入框,RN高本不支持
    react-native-datepicker				// RN中多种展示形式的日历插件
    react-native-orientation			// RN中监听设备的方向改变
    react-native-picker					// RN中底部弹出显示的三级城市联动
    react-native-circular-progress		// RN中的圆环,类似于echarts的环形图
    react-native-tinder-swipe-cards		// RN中带动画的卡片,使用场景不详
    react-native-collapsible			// RN中的动画可折叠组件,适用于手风琴,切换等
    react-native-charts-wrapper			// RN中Echarts图表
    react-native-image-viewer			// RN中的图片放大查看
    react-native-sglistview				// RN中对用户操作ListView列表后的位置记忆实现
    react-native-pathjs-charts			// RN中图表实现,同echarts
    react-native-fast-image				// RN中图片规则瀑布流,无限滚动
    react-native-loading-spinner-overlay			// RN中自定义loading加载gif图
    react-native-search-bar				// RN中图片文字都在中间的搜索框
    react-native-qrcode					// RN中二维码生成器
    tcomb-form-native					// RN中Form表单
    react-native-storage				// RN中本地存储
    react-native-progress				// RN中的加载进度条
    react-native-data-table				// RN中的表格插件,带检索匹配,由于使用率不高,Start数很低
    react-native-echarts				// RN中的Echarts图表插件
    react-native-dropdownalert			// RN中仿自带的Alert组件的提示语弹窗
    react-native-simple-radio-button				// RN中动画单选按钮组件Radio
    react-native-interactable				// 有很强交互效果的table视图
    react-native-simple-markdown			// markdown编辑器
    react-native-img-cache						// 图片缓存
    GirdShow-React-Native					// RN中的表格插件,由于使用率不高,Start数很低
    lottie-react-native						// RN动画库
    react-native-maps					// RN地图插件
    react-native-swiper					// RN轮播图
    react-native-drawer					// RN侧滑抽屉
    react-native-material-kit			// RN中仿谷歌的Material Design风格的Buttons
    react-native-svg					// RN中的使用svg图
    react-native-storage				// 本地存储
    react-native-code-push				// 代码远程热更新
    
    展开全文
  • 转载请标明出处:http://blog.csdn.net/u010046908/article/details/50916511本文出自:【李东的博客】前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native...

    转载请标明出处:http://blog.csdn.net/u010046908/article/details/50916511本文出自:【李东的博客】

    前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。
    ##1.get的请求方式的实现

     //get请求
      static  get(url, callback) {
          fetch(url)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }
    
    

    get请求很是简单基本就是这样,再不多说了。

    ##2.Post请求的实现
    post请求我在这里写了两种形式,一种是Content-Type为application/json的形式,另一种是Content-Type为application/x-www-form-urlencoded。
    ###2.1 application/json的形式

    static postJson (url, data, callback) {
        var fetchOptions = {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            //json形式
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        };
    
      fetch(url, fetchOptions)
        .then((response) => response.text())
        .then((responseText) => {
          callback(JSON.parse(responseText));
        }).done();
      }
    
    

    ###2.2 application/x-www-form-urlencoded的形式

     static  postFrom(url, data, callback) {
          var fetchOptions = {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              //表单
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:'data='+data+''
          };
    
          fetch(url, fetchOptions)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }
    
    

    ##3 NetUtil的实现

    /**
     * NetUitl 网络请求的实现
     * @author lidong
     * @date 2016-03-17 
     * https://github.com/facebook/react-native
     */
    'use strict';
    import React, {
      Component,
    } from 'react-native';
    
    class NetUitl extends React.Component {
    
      //post请求
      /**
      *url :请求地址
      *data:参数
      *callback:回调函数
      */
      static  postFrom(url, data, callback) {
          var fetchOptions = {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:'data='+data+''//这里我参数只有一个data,大家可以还有更多的参数
          };
    
          fetch(url, fetchOptions)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }
      /**
      *url :请求地址
      *data:参数(Json对象)
      *callback:回调函数
      */
    static postJson (url, data, callback) {
        var fetchOptions = {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            //json形式
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        };
    
      fetch(url, fetchOptions)
        .then((response) => response.text())
        .then((responseText) => {
          callback(JSON.parse(responseText));
        }).done();
      }
      //get请求
      /**
      *url :请求地址
      *callback:回调函数
      */
      static  get(url, callback) {
          fetch(url)
          .then((response) => response.text())
          .then((responseText) => {
            callback(JSON.parse(responseText));
          }).done();
        }
    
    }
    
    module.exports = NetUitl;
    
    

    ##4. 调用方法:
    ###4.1 get的调用方法:

    NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
          //回调的结果处理;
       })
    

    ###4.2 postJson的调用

    let data={'username':'123','password':'123456','token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'};
    NetUitl.postJson(url,data,function (set){
        switch (set.retCode) {
          case "0000":
              alert("登录成功");
            break;
         case "0001":
            alert("登录失败");
              break;
          default:
          alert("登录失败");
        }
      });
    

    ###4.3postFrom的调用

      let url = Global.LOGIN;
      let map = new Map()
      map.set('username',phone);
      map.set('password',pwd);
      let sx = Util.mapToJson(Util.tokenAndKo(map));
      NetUitl.postFrom(url,sx,function (set){
        switch (set.retCode) {
          case "0000":
              alert("登录成功");
            break;
         case "0001":
            alert("登录失败");
              break;
          default:
          alert("登录失败");
        }
      });
    

    以上就是React-Native中的网络请求的实现,欢迎大家来共同学习,有问题可以联系QQ:1561281670

    这里是我的一个学习React-Native的开源库:点击这里

    展开全文
  • react native总结

    2020-04-13 18:34:00
    react native总结》 关于react native运用的简单总结 一.介绍 react-native是fackbook推出的第三方开源框架,主要是通过js编写原生应用,目前只开放了ios版本,android在2105年10月份推出 二.react-native框架的...
                                                    《react native总结》
        关于react native运用的简单总结
    

    一.介绍
    react-native是fackbook推出的第三方开源框架,主要是通过js编写原生应用,目前只开放了ios版本,android在2105年10月份推出
    二.react-native框架的环境搭建
    1.安装homebrew
    ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
    2.安装nodejs
    brew install node
    3.安装watchman
    brew install watchman
    4.安装flow
    brew install flow
    5.安装react-native自己本身
    npm install -g react-native-cli
    6.建立项目
    react-native init myAPP
    如果建立项目成功,终端会弹出如下图的效果图

    三.简单的项目总结
    1.首先是在appdelegate类加载如下代码
    jsCodeLocation = [NSURL URLWithString:@“http://localhost:8081/index.ios.bundle”];
    2.配置创建js类的名称
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
    moduleName:@“PropertyFinderApp”
    launchOptions:launchOptions];

    3.接下来分析index.ios.js的实现过程
    主要分为六个个步骤
    (1)配置条件
    · ‘use strict’;
    (2)加载react-native
    · var React = require(‘react-native’);这句话主要是加载reactnative框架编写好了的控件,require是调用js的方法,调用编写的js如:var SearchPage = require(’./SearchPage’);
    (3)加载控件样式
    var {
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableHighlight,
    ActivityIndicatorIOS,
    Image,
    Component
    } = React;

    (4)创建css样式
    var styles = StyleSheet.create({
    description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: ‘center’,
    color: ‘#656565’
    },
    container: {
    padding: 30,
    marginTop: 65,
    alignItems: ‘center’
    },
    flowRight: {
    flexDirection: ‘row’,
    alignItems: ‘center’,
    alignSelf: ‘stretch’
    },
    buttonText: {
    fontSize: 18,
    color: ‘white’,
    alignSelf: ‘center’
    },
    button: {
    height: 36,
    flex: 1,
    flexDirection: ‘row’,
    backgroundColor: ‘#48BBEC’,
    borderColor: ‘#48BBEC’,
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: ‘stretch’,
    justifyContent: ‘center’
    },
    searchInput: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: ‘#48BBEC’,
    borderRadius: 8,
    color: ‘#48BBEC’
    },
    image: {
    width: 217,
    height: 138
    }
    });

    (5)创建js实现的类
    class myApp extends React.Component {
    render() {
    return (
    <React.NavigatorIOS
    style={styles.container}
    initialRoute={{
    title: ‘Property Finder’,
    component: SearchPage,
    }}/>
    );
    }
    }

    (6)想容器里注册我们创建的js类
    React.AppRegistry.registerComponent(‘myApp’,
    function() { return myApp });

    上面就是总结的react-native框架简单实现过程

    展开全文
  • React Native 复习生命周期 关于React Native,我知道的不多

  • 博客已经迁移到 HankinsPan的个人博客
  • React Native 复习

    生命周期

    这里写图片描述

    • 组件的生命周期分三个状态
      • Mounting(装载) 已插入真是的DOM
      • Updating 正在被重新渲染
      • UNMounting 已移出真实的DOM

    Mounting(装载)

    • getInitialState(): 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

    • componentWillMount():服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。

    • componentDidMount():在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。

    Updating(更新)

    • componentWillReceiveProps(object nextProps) 在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。
    • shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state,将要渲染之前调用。
    • componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。
      注意:你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps。

    • componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。
      该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

    Unmounting (移除)

    • componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。
      在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

      1. Component 与 PureComponent
      2. 操作延展符 {…pramas}
      3. 组件的属性(Props)
        • 每个组件只会根据props 渲染了自己一次,props 是不可变的。
    • this.props.xxx 获取组件属性,对象的属性可以任意定义,但要避免与Js关键字的冲突

    • this.props.children 返回组件对象的所有属性

      • 组件的类型PropTypes 可以接收任意类型值,字符串,对象,函数等等都可以。

    1 . ref属性(获取真实的DOM节点)
    - 组件并不是真实的DOM节点
    - 组件的render方法被调用时,ref才会被调用,组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用,那么你得到的是undefined。

    2 . state 状态
    - this.state 是组件私有的,可以通过getInitialState()方法初始化,通过调用 this.setState() 来改变它。当 state 更新之后,组件就会重新渲染自己。
    - render() 方法依赖于 this.props 和 this.state ,框架会确保渲染出来的 UI 界面总是与输入( this.props 和 this.state )保持一致。

    3 . render 方法是必须的。

    • 当该方法被回调的时候,会检测 this.props 和 this.state,并返回一个单子级组件。
    • render()函数应该是纯粹的,也就是说该函数不修改组件的 state,每次调用都返回相同的结果,不读写 DOM 信息,也不和浏览器交互(例如通过使用 setTimeout)。如果需要和浏览器交互,在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被理解。
    • 不要在render()函数中做复杂的操作,更不要进行网络请求,数据库读写,I/O等操作。

    4 . getInitalState() 初始化组件状态
    - 在组件挂载之前调用一次。返回值将会作为 this.state的初始值。
    - 通常在该方法中对组件的状态进行初始化。

    5 . getDefaultProps() 设置组件属性的默认值
    - 在组件类创建的时候调用一次,然后返回值被缓存下来。
    - 如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props
    - 该方法在任何实例创建之前调用,因此不能依赖于 this.props
    - getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。
    - 该方法在你封装一个自定义组件的时候经常用到,通常用于为组件初始化默认属性。

    6 . 箭头函数 (Arrow)
    - =>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。
    - 箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。
    // 箭头函数的例子

             ()=>1
             v=>v+1
             (a,b)=>a+b
             ()=>{
                 alert("foo");
             }
             e=>{
                 if (e == 0){
                     return 0;
                 }
                 return 1000/e;
             }

    不论是箭头函数还是bind,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么你必须自己保存这个引用。

    Redux 复习

    单向数据流

    1. action
      • actionCreater 就是一个函数
         var actionCreater = function(){
            return {`这里写代码片`
                type:'AN_ACTION'
            }
         }
     - 约定action 是有一个type属性的对象,然后按照type决定如何处理action。
     - 当然也可以有其他属性,可以存放任意想要的数据 => payload
     - 一般情况下默认导出,供相应的触发事件调用。
    

    2. Redux提供了
    - 存放应用程序状态的容器
    - 一种把action 分发到状态修改器的机制,也就是reducer函数
    - 监听状态变化机制

    javaScript总结

    1. 变量声明

      • const 和 let
        不要用 var,而是用 const 和 let,分别表示常量和变量。不同于 var 的函数作用域,const 和 let 都是块级作用域。
        const DELAY = 1000;

        let count = 0;
        count = count + 1;

      • 模板字符串
        模板字符串提供了另一种做字符串组合的方法。
        const user = ‘world’;
        console.log(hello ${user}); // hello world

        // 多行
        const content =
        Hello ${firstName},
        Thanks for ordering ${qty} tickets to ${event}.
        ;

      • 默认参数
        function logActivity(activity = ‘skiing’) {
        console.log(activity);
        }

        logActivity(); // skiing

    2. 箭头函数
      • 函数的快捷写法,不需要通过 function 关键字创建函数,并且还可以省略 return 关键字。
      • 同时,箭头函数还会继承当前上下文的 this 关键字。
        • 比如:
          [1, 2, 3].map(x => x + 1); // [2, 3, 4]
        • 等同于:
          [1, 2, 3].map((function(x) {
          return x + 1;
          }).bind(this));
    3. 模块的import 和export

      • import 用于引入模块,export 用于导出模块。
        // 引入全部
        import dva from ‘dva’;

        // 引入部分
        import { connect } from ‘dva’;
        import { Link, Route } from ‘dva/router’;

        // 引入全部并作为 github 对象
        import * as github from ‘./services/github’;

        // 导出默认
        export default App;
        // 部分导出,需 import { App } from ‘./file’; 引入
        export class App extend Component {};

    4. ES6 对象和数组

      • 析构赋值

        • 赋值让我们从 Object 或 Array 里取部分数据存为变量。
          // 对象
          const user = { name: ‘guanguan’, age: 2 };
          const { name, age } = user;
          console.log(${name} : ${age}); // guanguan : 2

          // 数组
          const arr = [1, 2];
          const [foo, bar] = arr;
          console.log(foo); // 1

        • 我们也可以析构传入的函数参数。
          const add = (state, { payload }) => {
          return state.concat(payload);
          };
        • 析构时还可以配 alias,让代码更具有语义。
          const add = (state, { payload: todo }) => {
          return state.concat(todo);
          };
      • 对象字面量改进

        • 这是析构的反向操作,用于重新组织一个 Object 。
          const name = ‘duoduo’;
          const age = 8;

          const user = { name, age }; // { name: ‘duoduo’, age: 8 }

        • 定义对象方法时,还可以省去 function 关键字。
          app.model({
          reducers: {
          add() {} // 等同于 add: function() {}
          },
          effects: {
          addRemote() {} // 等同于 addRemote: function() {}
          },
          });
      • Spread Operator(操作延展符 … )

        • Spread Operator 即 3 个点 …,有几种不同的使用方法。
        • 可用于组装数组。
          const todos = [‘Learn dva’];
          […todos, ‘Learn antd’]; // [‘Learn dva’, ‘Learn antd’]
        • 也可用于获取数组的部分项。
          const arr = [‘a’, ‘b’, ‘c’];
          const [first, …rest] = arr;
          rest; // [‘b’, ‘c’]

          // With ignore
          const [first, , …rest] = arr;
          rest; // [‘c’]

        • 还可收集函数参数为数组。
          function directions(first, …rest) {
          console.log(rest);
          }
          directions(‘a’, ‘b’, ‘c’); // [‘b’, ‘c’];
        • 代替 apply。
          function foo(x, y, z) {}
          const args = [1,2,3];

          // 下面两句效果相同
          foo.apply(null, args);
          foo(…args);

        • 对于 Object 而言,用于组合成新的 Object 。
          const foo = {
          a: 1,
          b: 2,
          };
          const bar = {
          b: 3,
          c: 2,
          };
          const d = 4;

          const ret = { …foo, …bar, d }; // { a:1, b:3, c:2, d:4 }

        • 此外,在 JSX 中 Spread Operator( …) 还可用于扩展 props
      • Promises

        • Promise 用于更优雅地处理异步请求。比如发起异步请求:
          fetch(‘/api/todos’)
          .then(res => res.json())
          .then(data => ({ data }))
          .catch(err => ({ err }));
        • 定义Promise
          const delay = (timeout) => {
          return new Promise(resolve => {
          setTimeout(resolve, timeout);
          });
          };

          delay(1000).then(_ => {
          console.log(‘executed’);
          })

      • Generators
        • dva 的 effects 是通过 generator 组织的。
        • Generator 返回的是迭代器,通过 yield 关键字实现暂停功能。
        • 这是一个典型的 dva effect,通过 yield 把异步逻辑通过同步的方式组织起来。
          app.model({
          namespace: ‘todos’,
          effects: {
          *addRemote({ payload: todo }, { put, call }) {
          yield call(addTodo, todo);
          yield put({ type: ‘add’, payload: todo });
          },
          },
          });
    5. React Component

      • React Component 有 3 种定义方式,分别是 React.createClass, class 和 Stateless Functional Component。
      • 推荐尽量使用最后一种,保持简洁和无状态。
      • 这是函数,不是 Object,没有 this 作用域,是 pure function。
        • 比如定义 App Component 。
          function App(props) {
          function handleClick() {
          props.dispatch({ type: ‘app/create’ });
          }
          return
          ${props.name}

          }
        • 等同于:
          class App extends React.Componnet {
          handleClick() {
          this.props.dispatch({ type: ‘app/create’ });
          }
          render() {
          return
          ${this.props.name}

          }
          }
    6. JSX
      • Component 嵌套
        • 类似于HTML,JSX里面可以给组件添加子组件




      • className
        • class 是保留词,所以添加样式时,需用 className 代替 class 。
      • JavaScript 表达式
        • JavaScript 表达式需要用 {} 括起来,会执行并返回结果。
        • 比如:

          { this.props.title }

    7. Props
      数据处理在 React 中是非常重要的概念之一,分别可以通过 props, state 和 context 来处理数据。而在 dva 应用里,你只需关心 props 。

      • propsType

        • JavaScript 是弱类型语言,所以请尽量声明 propTypes 对 props 进行校验,以减少不必要的问题。
          function App(props) {
          return
          {props.name}
          ;
          }
          App.propTypes = {
          name: React.PropTypes.string.isRequired,
          };
        • 内置的 prop type 有:
        • PropTypes.array
        • PropTypes.bool
        • PropTypes.func
        • PropTypes.number
        • PropTypes.object
        • PropTypes.string
        • 往下传数据
          这里写图片描述

        • 往上传数据
          这里写图片描述

      • 理解CSS Modules
        这里写图片描述

      • 结构说明

        • button class 在构建之后会被重命名为 ProductList_button_1FU0u 。button 是 local name,而 ProductList_button_1FU0u是 global name 。你可以用简短的描述性名字,而不需要关心命名冲突问题。
        • 然后你要做的全部事情就是在 css/less 文件里写 .button {…},并在组件里通过 styles.button 来引用他。
      • 定义全局CSS
        • CSS Modules 默认是局部作用域的,想要声明一个全局规则,可用 :global 语法。
        • 比如:
          .title {
          color: red;
          }
          :global(.title) {
          color: green;
          }
        • 然后在引用的时候:
          // red
          // green
      • className Package
        • 在一些复杂的场景中,一个元素可能对应多个 className,而每个 className 又基于一些条件来决定是否出现。
        • 这时,classnames 这个库就非常有用。
          import classnames from ‘classnames’;
          const App = (props) => {
          const cls = classnames({
          btn: true,
          btnLarge: props.type === ‘submit’,
          btnSmall: props.type === ‘edit’,
          });
          return
    展开全文
  • React Native的设计理念: 既拥有Native的用户体验、又保留React的开发效率 优势: 它对比原生开发更为灵活,对比H5体验更为高效。 替代传统的WebView,打开效率更高,和原生之间的交互更方便。 多个版本迭代...

    一、RN优劣势

    React Native的设计理念: 既拥有Native的用户体验、又保留React的开发效率

    优势:

    它对比原生开发更为灵活,对比H5体验更为高效。

    替代传统的WebView,打开效率更高,和原生之间的交互更方便。

    多个版本迭代后的今天,它已经拥有了丰富第三方插件支持。

    更方便的热更新。

    劣势:

    尽管是跨平台,但是不同平台Api的特性与显示并不一定一致。

    调试’相对‘麻烦。

    Android上的兼容性问题。

    风险:

    尽管Facebook有3款App(Groups、Ads Manager、F8)使用了React Native,随着React Native大规模应用,Appstore的政策是否有变不得而知

    二、搭建开发环境

    Node环境

    React Native需要NodeJS 4.0或更高版本

    React Native的命令行工具(react-native-cli)

    React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g react-native-cli

    新建项目

    react-native init MyAppTest

    cd MyAppTest

    react-native run-ios

    如果使用Mac开发,直接下载Xcode,react-naitve run-ios时会自动遍历你电脑上是否安装Xcode,如果安装直接启动Xcode的模拟器,window上需要安装Android模拟器才能运行

    开发环境搭建详见官网

    三、常用组件

    详细总结
    View组件

    View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。
    View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用

    <View style={styles.container}>  
        <View style={[styles.flex, styles.center]}>  
            <Text style={styles.white}>酒店</Text>  
        </View>  
    </View> 
    

    View就相当于一个容器,能设置背景、边框等样式

    View组件里面是不能直接写文字的:如

    <View>当前可用积分</View>
    

    在RN的低版本里面会直接抛异常,在高版本里面虽说能正常运行,但是也不会生效

    详细请参考官网

    注意:

    如果要使用onPress点击事件,请直接使用Touchable系列组件替代View,然后添加onPress函数,View自身是没有onPress属性的

    Text组件

    一个用于显示文本的React组件,并且它也支持嵌套、样式,以及触摸处理 如:

    <View style={styles.container}>  
        <Text style={styles.font}>  
            <Text style={styles.red}>网易</Text>  
            <Text style={styles.white}>新闻</Text>  
            <Text>有态度</Text>  
        </Text>  
    </View>
    

    常用特性 详细请参考官网

    onPress:手指触摸事件 点击事件  
    numberOfLines :显示多少行 
    

    常用样式设置

    color:字体颜色  
    fontSize:字体大小  
    fontWeight:字体加粗enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')  
    指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果     某个值不支持,则会自动选择最接近的值。  
    textAlign:对齐方式  
    lineHeight number  
    

    Touchable类组件

    该组件用于封装视图,使其可以正确响应触摸操作

    常用设置

    TouchableOpacity:透明触摸,点击时,组件会出现透明过度效果。  
    TouchableHighlight:高亮触摸,点击时组件会出现高亮效果。只能进行一层嵌套,不能多层嵌套  
    TouchableWithoutFeedback:无反馈触摸,点击时候,组件无视觉变化
    

    TouchableOpacity示例:

    <TouchableOpacity  
        activeOpacity={0.8}  
        onPress={this.onButtonClick}  
        style={styles.signBtn}>  
        <Text style={styles.signBtnText}>立即签到</Text>  
    </TouchableOpacity>  
    

    activeOpacity指定封装的视图在被触摸操作激活时以多少不透明度显示(通常在0到1之间)

    TextInput组件

    TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等

    通用属性设置(属性很多就不一一列举,详细可查看官网)

    (1)autoCapitalize:首字母自动大写。可选值有:none、sentences、words、characters。  
      ● none:不自动变为大写  
      ● sentences:将每句话的首字母自动改成大写  
      ● words:将每个单词的首字母自动改成大写  
      ● characters:将每个英文字母自动改为大写 
      
    (2)placeholder:占位符,在输入前显示的文本内容。 
    (3)value:用来设置 TextInput 组件内字符串的值。
    (4)multiline:如果为 true,表示多行输入
    (5)editable:默认为 true。如果设置为 false 表示不可编辑。  
    (6)maxLength:能够输入的最长字符数
    (7)defaultValue:用来定义 TextInput 组件中的字符串默认值
    

    组件的方法属性

    (1)onChange:当文本发生变化时,调用该函数
    (2)onChangeText:当文本发生变化时,调用该函数。
        onChangeText 回调函数与上面的 onChange 类似,但它的好处是直接可以接收用户输入的字符串。
    (3)onEndEditing:当结束编辑时,调用该函数。
    (4)onBlur:失去焦点时触发(在 onEndEditing 之后)
    (5)onFocus:获得焦点时触发
    

    TextInput用法示例

    <View style={styles.textareaContent}>  
        <Text style={styles.tcTitle}>反馈内容:</Text>  
        <TextInput  
        multiline={true}//多行输入  
        style={styles.tcInput}  
        autoCapitalize="none"//不自动切花任何大小写iOS上默认会首字母大写,需要手动设置一下  
        placeholder="请填写您的宝贵意见,让58不断进步,谢谢!"  
        placeholderTextColor="#CCC"  
        onChangeText={(textarea) => this.setState({ textarea })}  
        />  
    </View>  
    

    关于软键盘Keyboard的讲解

    Image组件

    Image组件的详细总结
    1、组件的基本用法

    1.1 从当前项目中加载图片

    要往App中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:
    <Image source={require(’./my-icon.png’)} />

    {/*从项目中加载图片*/} 
    <TouchableOpacity
          style={styles.redeem}
          onPress={() => navigate("Redeem", { title: "积分兑换" })}>
          <Image  source={require("./../../img/task/jifen-icon.png")} style={styles.imageStyle} />
           <Text style={styles.redeemText}>积分兑换</Text>
    </TouchableOpacity>
    

    不支持变量拼接的写法 如:

    // 错误  
    let icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';  
    <Image source={require('./' + icon + '.png')} />  
      
    // 正确  
    let icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');  
    <Image source={icon} /> 
    

    1.2 加载使用APP中的图片
    注意:这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在,而且还需要指定尺寸。

    {/*从资源包中加载图片*/}  
     <Text>2.从APP中加载图片</Text>  
     <Image source={{uri:'icon_a'}} style={styles.imageStyle} /> 
    

    1.3 加载来自网络的图片

    客户端的很多图片资源基本上都是实时通过网络进行获取的,这边一定需要指定图片的尺寸大小,实现如下

    {/*从网络中加载图片*/}  
     <Text>3.从网络中加载图片</Text>  
     <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}  
            style={styles.imageStyle} /> 
    

    1.4 设置图片为背景
    直接在Image组件里面嵌套写的组件 实现如下

    <Image
        style={styles.newTaskHeader}
        source={require("./../../img/task/xsrw-bg.png")}>  
        <Text style={styles.ntTitle}>积分兑换优惠券啦~</Text>
        <Text style={styles.ntSubTitle}>完成任务获取积分,多重优惠券好礼不停送!</Text>  
    </Image>
    

    在rn版本0.46版本的时候添加了ImageBackground控件,在0.46版本以后使用Image的时候不能在嵌套使用,ImageBackground就是解决这个问题的。ImageBackground的使用和Image一样

    <ImageBackground
        style={styles.newTaskHeader}
        source={require("./../../img/task/xsrw-bg.png")}>  
        <Text style={styles.ntTitle}>积分兑换优惠券啦~</Text>
        <Text style={styles.ntSubTitle}>完成任务获取积分,多重优惠券好礼不停送!</Text>  
    </ImageBackground>
    

    开发时遇到的问题:
    在iOS上Image里面嵌套的Text组件总是会出现白色背景 如下图
    image
    解决方法:
    给Image添加透明背景backgroundColor: “transparent” 解决完显示如下
    image

    2、组件的常见属性

    2.1 常用样式

      FlexBox         支持弹性盒子风格
      Transforms      支持属性动画
      backgroundColor 背景颜色
      borderColor     边框颜色
      borderWidth     边框宽度
      borderRadius    边框圆角
      overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')
    
      tintColor       颜色设置
    
      opacity 设置不透明度0.0(透明)-1.0(完全不透明)
    

    2.2 常用属性方法

    resizeMode
    
       缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候,会根据设置Mode进行缩放或者裁剪图片
       'cover':图片居中显示,没有被拉伸,超出部分被截断
       'contain':容器完全容纳图片,图片等比例进拉伸
       'stretch':图片被拉伸适应容器大小,有可能会发生变形
    

    详细讲解 官网

    ScrollView组件

    能够调用移动平台的ScrollView(滚动视图)的组件 当内容显示不全时可以通过滚动显示
    常用属性

    (1) View props… :继承View的所有属性 
    (2) horizontal(bool):表示ScrollView是横向滑动还是纵向滑动.默认false表示纵向滑动
    (3) scrollTo: (y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) 
    滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。
    (4) scrollToEnd: 滚动到视图底部(水平方向的视图则滚动到最右边)scrollToEnd({animated: true})则启用平滑滚动动画
    

    详见官网

    ListView组件

    一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表
    在RN 0.43版本以后,新出了一个FlatList的长列表组件,在数据量比较大的情况下,性能要比List View好很多,并且在高版本的RN中ListView已经逐渐废弃,不再维护,这里就不在讲解了
    详见官网

    FlatList组件

    常用属性

    ItemSeparatorComponent:分割线组件, 
    ListFooterComponent:结尾组件 
    ListHeaderComponent:头组件 
    data:列表数据 data属性目前只支持普通数组
    horizontal:设置为true则变为水平列表(默认false)。 
    numColumns:列数 组件内元素必须是等高的,当horizontal为true时不支持此参数 
    renderItem:渲染每个组件 
    keyExtractor:给定的item生成一个不重复的Key
    ListEmptyComponent:数据为空时的布局
    initialNumToRender:指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素
    

    用法示例

    <FlatList
        data={this.state.taskList}
        //使用 ref 可以获取到相应的组件
        ref={(flatList) => (this._flatList = flatList)}  
        //header头部组件
        ListHeaderComponent={this._header} 
        //空数据视图,可以是ReactComponent,也可以是一个render函数,或者渲染好的element。
        keyExtractor={(item, index) => "index" + index + item}
        ListEmptyComponent={this._renderEmptyView}
        renderItem={this._renderItem}
    />
    
     _renderItem = ({ item, index }) => {
            return (
                <View style={styles.list} key={index}>
                    <View style={styles.content}>
                        <Text style={styles.contentTitle}>{item.title}</Text>
                        <Text style={styles.contentTip}>
                            任务奖励<Text style={{ color: "#FF552E" }}>+{item.integral}积分</Text>
                        </Text>
                    </View>
                    <View style={styles.listBtn}>
                        <Text style={styles.text13FFF}>去完成</Text>
                    </View>
                </View>
            );
        };
    

    SectionList组件

    也是0.43版本推出的,高性能的分组列表组件
    常用属性

    ItemSeparatorComponent:分割线组件, 
    ListFooterComponent:结尾组件 
    ListHeaderComponent:头组件 
    sections:数据源 
    数据格式[ // 不同section渲染相同类型的子组件
        {data: [...], key: ...},
        {data: [...], key: ...},
        {data: [...], key: ...},
      ]
    renderItem:渲染每个组件 
    keyExtractor:给定的item生成一个不重复的Key
    ListEmptyComponent:数据为空时的布局
    initialNumToRender:指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素
    renderSectionHeader:每个section的组头
    

    用法示例

    <SectionList
        sections={section}
        //区域header头部组件
        renderSectionHeader={this._sectionHeader}
        keyExtractor={(item, index) => "index" + index + item}
        renderItem={this._renderItem}
    />
    //其中renderSectionHeader中传入的数据格式和renderItem是有区别的
    _sectionHeader = (info) => {
            //传入参数info的示例
        {
    	"section": {
    		"title": "general",
    		"data": [ {
    			"integral": 50,
    			"status": 1,
    			"taskId": "2",
    			"title": "查看未读消息 ",
    			"taskTag": 1
    		}, {
    			"integral": 50,
    			"status": 1,
    			"taskId": "1",
    			"title": "查看未接电话",
    			"taskTag": 1
    		}]
    	}
    }
    

    四、style样式及Flex布局

    React-Native 编写的应用的样式不是靠css来实现的,而是依赖javascript来为你的应用来添加样式

    1、声明样式
    导入必要文件

    import React, { StyleSheet } from “react-native”;

    然后调用React-Native的一个构造方法,传入一个对象生成style,和React的React.createCladd()语法是一样的,传入对象的key就相当于类名,每个类也是一个对象,可以配置各种样式参数,总体来说和CSS的写法差不多,差别上把CSS的命名又“-”连字符改成驼峰写法,然后长度不用加单位“px”,字符串比如色值需要加引号写成字符串。

    const styles = StyleSheet.create({  
        base: {  
            width: 38,  
            height: 38,  
        },  
        background: {  
            backgroundColor: '#222222',  
        },  
        active: {  
            borderWidth: 2,  
            borderColor: ‘#ff00ff',  
        },  
    });  
    

    2、样式使用
    所有的核心组件都支持样式属性

    <View style={styles.base}></View>  
    

    当你需要设置多个属性类的时候,可以传入一个数组

    <View style={[styles.base,styles.backgroundColor]}></View>  
    

    也可以在组件中render样式,然而这种做法不推荐,其实就像一般html页面中行内样式不推荐一样

    <View  
      style={{width:this.state.width, height:this.state.width*this.state.aspectRatio}}  
    /> 
    <View  
      style={[styles.base,{width:this.state.width, height:this.state.width*this.state.aspectRatio}]}  
    /> 
    

    3、flexBox布局

    3.1 什么是FlexBox布局?
    弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性。

    Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至是顺序),以最佳方式填充可用空间;

    3.2 Flex布局基于flex-flow流

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

    3.3 在React Native中,有4个容器属性,2个项目属性

    容器属性:flexDirection   flexWrap   justifyContent  alignItems
    
    项目属性:flex  alignSelf
    

    3.3.1 flexDirection

    flexDirection容器属性: row | row-reverse | column | column-reverse

    该属性决定主轴的方向(即项目的排列方向)。

    row:主轴为水平方向,起点在左端。
    
    row-reverse:主轴为水平方向,起点在右端。
    
    column(默认值):主轴为垂直方向,起点在上沿。
    
    column-reverse:主轴为垂直方向,起点在下沿。
    

    3.3.2 flexWrap

    flexWrap容器属性: nowrap | wrap | wrap-reverse

    默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    nowrap(默认值):不换行
    
    wrap:换行,第一行在上方
    
    wrap-reverse:换行,第一行在下方。(和wrap相反)
    

    3.3.3 justifyContent

    justifyContent容器属性:flex-start | flex-end | center | space-between | space-around

    定义了伸缩项目在主轴线的对齐方式

    flex-start(默认值):伸缩项目向一行的起始位置靠齐。
    
    flex-end:伸缩项目向一行的结束位置靠齐。
    
    center:伸缩项目向一行的中间位置靠齐。
    
    space-between:两端对齐,项目之间的间隔都相等。
    
    space-around:伸缩项目会平均地分布在行里,两端保留一半的空间
    

    3.3.4 alignItems

    alignItems容器属性:flex-start | flex-end | center | baseline | stretch

    定义项目在交叉轴上如何对齐,可以把其想像成侧轴(垂直于主轴)的“对齐方式”。

    flex-start:交叉轴的起点对齐。
    
    flex-end:交叉轴的终点对齐 。
    
    center:交叉轴的中点对齐。
    
    baseline:项目的第一行文字的基线对齐。
    
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
    

    3.3.5 flex项目属性

    flex项目属性:flex-grow | flex-shrink | flex-basis

    复合属性。设置或检索伸缩盒对象的子元素如何分配空间,其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。默认值为“0 1 auto”。

    3.3.6 alignSelf项目属性

    alignSelf项目属性:auto | flex-start | flex-end | center | baseline | stretch

    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

    默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

    我这归纳了一些平时RN开发常用的样式 详见

    五、导航路由(难点、重点)

    在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。
    react-navigation 主要包括三个组件:

    StackNavigator 导航组件
    TabNavigator 切换组件
    DrawerNavigator 抽屉组件

    详细参数配置及用法详解

    1、StackNavigator
    组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数:

    StackNavigator(RouteConfigs, StackNavigatorConfig)
    

    StackNavigator参数:

    navigationOptions:配置StackNavigator的一些属性。  
      
        title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用  
        header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null  
        headerTitle:设置导航栏标题,推荐  
        headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null  
        headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"  
        headerRight:设置导航条右侧。可以是按钮或者其他视图控件  
        headerLeft:设置导航条左侧。可以是按钮或者其他视图控件  
        headerStyle:设置导航条的样式。背景色,宽高等  
        headerTitleStyle:设置导航栏文字样式  
        headerBackTitleStyle:设置导航栏‘返回’文字样式  
        headerTintColor:设置导航栏颜色  
        headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0  
        gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭  
       
      
    screen:对应界面名称,需要填入import之后的页面  
      
    mode:定义跳转风格  
      
       card:使用iOS和安卓默认的风格  
      
       modal:iOS独有的使屏幕从底部画出。类似iOS的present效果  
      
    headerMode:返回上级页面时动画效果  
      
       float:iOS默认的效果  
      
       screen:滑动过程中,整个页面都会返回  
      
       none:无动画  
      
    cardStyle:自定义设置跳转效果  
      
       transitionConfig: 自定义设置滑动返回的配置  
      
       onTransitionStart:当转换动画即将开始时被调用的功能  
      
       onTransitionEnd:当转换动画完成,将被调用的功能  
      
    path:路由中设置的路径的覆盖映射配置  
      
    initialRouteName:设置默认的页面组件,必须是上面已注册的页面组件  
      
    initialRouteParams:初始路由参数 
    

    RouteConfigs
    可以只配置RouteConfigs参数(本次分享只介绍第一个参数的配置和用法)
    RouteConfigs参数表示各个页面路由配置,React开发中的 Router路由配置 ,它是让导航器知道需要导航的路由对应的页面

    React路由配置

    ReactDom.render(
         <Router history={hashHistory}>
            <Route path='/' component={Page}></Route>
            <Route path='/NewTask' component={NewTask} />
            <Route path='/Redeem' component={Redeem} />
            <Route path='/Rule' component={Rule} />
        </Router> 
        ,document.getElementById("app"));
    

    RN导航路由配置

    //功能:任务首页->积分兑换->兑换规则
    const MyNavigator = StackNavigator({
        Home: { 
            screen: Task,
            //加载首屏需要在navigationOptions里面配置首页导航信息
            navigationOptions: ({ navigation }) => ({
                    headerTitle: "首页",
                    headerBackTitle: null
                })
        },  
        Redeem: {  
            screen: Redeem
        },
        Rule: {
            screen: Rule
        }
    })
    AppRegistry.registerComponent("MyNavigator", () => App);
    
    '注意:导航配置时要在路由的上一个页面设置headerBackTitle为null,不然路由跳转到的目的页面左侧返回按钮后面会默认带上上一个页面的标题'
    
    页面的配置选项 navigationOptions 通常还可以在对应页面中去静态配置,比如在 Redeem 页面中(注意:如果默认是首页的话就要在声明static navigationOptions了)
    class Redeem extends Component {
        static navigationOptions = ({ navigation }) => ({
            headerTitle: `${navigation.state.params.title}`,
            headerRight: (
                <View style={{ flexDirection: "row" }}>
                    <Text
                        style={{ color: "#333", marginRight: 13 }}
                        onPress={() =>navigation.state.params ? navigation.state.params.jumpToRule() : null
                        }>
                        兑换规则
                    </Text>
                </View>
            )
        });
        .....
    }
    一般子页面navigationOptions参数最好都在子页面里面去配置,不要在首页到导航参数里面配置,方便调用本类方法
    

    路由跳转:
    已经配置好导航器以及对应的路由页面了,但是要完成页面之间的跳转,还需要 navigation
    navigation
    在导航器中的每一个页面,都有 navigation 属性,该属性有以下几个属性/方法:

    navigate - 跳转到其他页面
    调用这个方法可以跳转到导航器中的其他页面,此方法有三个参数
    -routeName 导航器中配置的路由名称
    -params 传递参数到下一个页面
    -action action
    
    state - 当前页面导航器的状态
    state 里面包含有传递过来的参数 params 、 key 、路由名称 routeName 
    { 
      params: { param: 'i am the param' },
      key: 'id-1500546317301-1',
      routeName: 'Redeem' 
    }
    
    setParams - 更改路由的参数
    更改当前页面路由的参数,比如可以用来更新头部的按钮或者标题
    
    goBack - 返回
    回退,可以不传,也可以传参数,还可以传 null 
    this.props.navigation.goBack();       // 回退到上一个页面
    this.props.navigation.goBack(null);   // 回退到任意一个页面
    this.props.navigation.goBack('Home'); // 回退到Home页面
    dispatch - 发送一个action
    

    跳转
    首先在render里面声明navigate

    const { navigate } = this.props.navigation;
    

    然后通过点击事件调用navigate跳转

    <TouchableOpacity
        style={styles.redeem}
        onPress={() => navigate("Redeem", { title: "积分兑换" })}>
        <Text style={styles.redeemText}>积分兑换</Text>
    </TouchableOpacity>
    

    到此就完成了一个页面到另一个页面的路由跳转以及页面的导航标题参数配置

    导航右侧按钮配置

    headerRight: (
        <View style={{ flexDirection: "row" }}>
            <Text
            style={{ color: "#333", marginRight: 13 }}
            onPress={() =>navigation.state.params ? navigation.state.params.jumpToRule() : null
            }>
                兑换规则
            </Text>
        </View>
    )
    

    使用react-navigation时,单页面设置navigationOptions中,进行Static中调用本类中的方法,不能像以下设置
    onPress = {()=>this.jumpToRule()}
    解决方法:
    首先声明一个jumpToRule=()=>{}方法
    然后调用navigation中的setParams方法把jumpToRule方法作为一个参数set到页面路由中
    setParams要在声明周期的componentDidMount里面去执行

    componentDidMount() {
        this.props.navigation.setParams({
            jumpToRule: this.jumpToRule
        });
    }
    

    六、屏幕适配

    详见

    结语:这是在近半月开发RN的过程中总结的一些知识以及遇到的一些问题,目前运用的也不是太熟练,有兴趣的同学大街可以一块学习探讨,共同进步

    展开全文
  • React Native开发总结

    2019-04-18 17:19:34
    注:本文是我在开发过程中遇到问题,之后会持续更新,希望帮助到更多的学习者。文中有不妥的地方希望指出共同学习,同时欢迎大神补充。 错误1: Paste_Image.png ...估计是程序中有格式错误请自行检查比如:你注释...
  • ReactNative学习小结

    2016-07-22 17:47:15
    ReactNative
  • 参考地址:http://reactnative.cn/docs/0.40/native-modules-android.html#content 2.RN如何跳转到native页面? 我们要从RN页面跳转到native页面,就要用到intent。但是如何使用intent呢?参考上边的RN调用native
  • 前一段时间,毕业,追剧打游戏,导致,堕落到没有...so,把最近学习的React Native总结一下,毕竟,对于我这种刚刚毕业的用不起Mac只有Windows的孩子来说,坑还是不少的! 学习的第一步,当然是搭建环境,不然怎么...
  • (一)前言 现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等),今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。 刚创建的React Native...
  • (一)前言 前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是React Native项目签名打包。 刚创建的React Native...
  • 针对近期比较火的React Native框架,对它进行了一番研究,主要针对以下几点内容,进行总结: 1、React Native在windows上的环境搭建及运行? 2、React Native如何打包发布Android apk问题? 3、如何学习React
  • 从2016年开始关注React Native到现在,React Native的每一个版本发布我都会关注一下,虽然最近将重心转移到区块链开发上,这一年里,我还出版了一本《React Native移动开发实战》的书。在过去的一年中React Native...
  • 最近学习了一个网上的React Native项目,利用React Native制作一个类似于美团的App,项目属于对之前React Native常用组件的基本使用,但是仍有一些关键点值得记录。最后做成的效果如下:1、通过React Navigation来...
  • 摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?...
  • Reactnative嵌套Android再嵌套ReactNative项目总结 转载请注明出处,阳仔在此谢谢啦!如有不妥多指教! ** 示例图:RN开发的理财app–>点击‘我要借款’—>跳转到RN开发的借款app—>点击返回按钮返回到...
  • React Native概述什么是React NativeReact Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)...
  • 关于React Native是什么,各位可谷歌之,这里主要给大家安利下React Native总结下一些从Android到React Native相关的概念和基础。来吧,互相伤害啊(˶‾᷄ ⁻̫ ‾᷅˵)。 本文并非讲解入门基础,更多是给...
  • 对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 ...新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!
  • 最近在学习和开发react native的过程中,看了社区很多大牛的的文章,自己总结的一些东西。 1.react Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部...
1 2 3 4 5 ... 20
收藏数 12,293
精华内容 4,917
关键字:

reactnative总结