2018-06-13 10:50:25 qfeung 阅读数 561
  • -路由映射表(route-map)篇

    更多课程,请百度搜索“晁海江”。 通过4个实验,演示路由图在路由重分发、NAT中的功能,同时在实验5中,详细分析了,路由图在调用ACL的时候,ACL的动作对路由图起到的影响。 2015年7月29日:更新补充实验6:通过结合使用路由图和路由重分发,实现内网流量路径定义。

    9725 人正在学习 去看看 晁海江

ReactNative中的PropTypes

Overview

Runtime type checking for React props and similar objects.

You can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries—see the checkPropTypes() reference below) will check props passed to your components against those definitions, and warn in development if they don’t match.

  1. RN中主要用于自定义组件属性的类型限定,或者叫做属性确认,当外部传入非法的属性类型,会有警告(不是IDE,而是控制台)。
  2. 网上说使用PropTypes定义的属性,会有提示。(然而我试了Atom & WebStorm,IDE并没有提示)

重大变更记录

React v15.5,PropTypes被从react库中拿了出来,单独放在了一个名为prop-types的库中.

导入方式

  • React v15.5之前,PropTypes属于react库.
import { PropTypes } from 'react';
  • React v15.5开始,react库移除了PropTypes,转而使用prop-types库替代.
import PropTypes from 'prop-types';

使用方式

  • React v15.5`之前
static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
    };  // 注意这里有分号
  • React v15.5开始
static propTypes = {
        autoPlay: PropTypes.bool.isRequired,
        maxLoops: PropTypes.number.isRequired,
    };  // 注意这里有分号

Others

  1. PropTypesreact库移除之后,会导致老项目报错(属性找不到).
  2. RN的版本更新很快,目前已经是0.51.0,随着React Native的升级,系统废弃了很多的东西,过去我们可以直接使用 React.PropTypes来进行属性确认,不过这个自React v15.5起就被移除了,转而使用prop-types库来进行替换.
  3. 为了保证RN代码高效运行,属性确认仅在开发环境中有效,正式发布的 App 运行时是不会进行检查的.
2019-08-26 19:54:35 qq_21937107 阅读数 32
  • -路由映射表(route-map)篇

    更多课程,请百度搜索“晁海江”。 通过4个实验,演示路由图在路由重分发、NAT中的功能,同时在实验5中,详细分析了,路由图在调用ACL的时候,ACL的动作对路由图起到的影响。 2015年7月29日:更新补充实验6:通过结合使用路由图和路由重分发,实现内网流量路径定义。

    9725 人正在学习 去看看 晁海江
  _onChangedValue=(checked,items)=>{
        this.state.distributionList.map(item=>{
            if(JSON.stringify(items) === JSON.stringify(item)){
                item.checked=checked;
            }
        });
        this.setState({
            distributionList:[
                ...this.state.distributionList,
            ]
        });
        console.log(444,this.state.distributionList);

    }
  const {distributionList}=this.state;
        console.log(555,distributionList);
        const {appusermobile, appuserid, saasId, trueName} = this.state.userInfo;
        let ids=[], splitIds='';
        for(let i=0;i<distributionList.length;i++){
            if(distributionList[i].checked){
                ids.push(distributionList[i].userid);
            }
        }
        console.log(41444,ids);
        if(ids.length===0){
            Toast.info('请选择客户列表')
            return;
        }
        for(let i=0;i<ids.length;i++){
            splitIds += ids[i] + ','
        }
        splitIds=splitIds.substring(0,splitIds.lastIndexOf(','));
        let url=Config.cashLoanBaseApi+Config.addAutoDistribution+`?saasId=${saasId}&ids=${splitIds}`;
        console.log(3333,url);
        fetch(url,{method:'POST'}).then(res=>res.json()).then(responseText=>{
            console.log(4444,responseText);
            if(responseText.success){
                DeviceEventEmitter.emit('updateGeneralConfigList',true);
                this.props.navigation.goBack();
            }
        }).catch(error=>{
            Toast.fail(error)
        })
2019-12-03 16:04:43 qq_36229552 阅读数 6
  • -路由映射表(route-map)篇

    更多课程,请百度搜索“晁海江”。 通过4个实验,演示路由图在路由重分发、NAT中的功能,同时在实验5中,详细分析了,路由图在调用ACL的时候,ACL的动作对路由图起到的影响。 2015年7月29日:更新补充实验6:通过结合使用路由图和路由重分发,实现内网流量路径定义。

    9725 人正在学习 去看看 晁海江

组件 DetailsList.js 代码如下
在这里插入图片描述

let data = item.item.shopData;  //获取数据
        let list = '';
        data.map((e) => {
            list = e
        });

在这里插入图片描述

ViolationManagement.js 里面引入组件 我这里模拟的是假数据

flatData: [
                {"key": "1",
                 "shopData": [
                        {
                            title: '商户门前乱摆卖',
                            MerchantName: '因市场改造升级xxxxxxxxxxxxx',
                            shopName: '测试商铺1',
                            time: '2019-10-10',
                            ApprovalTxt: '审批通过',
                            onState: 0,
                            id: 0,
                        }
                    ]
                },
                {"key": "2",
                 "shopData": [
                        {
                            title: '车辆占用商户通道',
                            MerchantName: '因市场改造升级xxxxxxxxxxxxx测试商户2',
                            shopName: '测试商铺2',
                            time: '2019-10-12',
                            ApprovalTxt: '审批驳回',
                            onState: 1,
                            id: 1,
                        }
                    ]
                } 
            ]

引入组件里对应输入
在这里插入图片描述
点击事件

nextClick(list) {
        if (list) {
            NavigationUtil.goPage({
                navigation: this.props.navigation,
                type: list.onState,
            }, 'ViolationDetailsPage')
        }
    }

最终效果 点击相应块,获取对应数据
在这里插入图片描述

2017-10-18 11:53:58 chenzhen200638 阅读数 737
  • -路由映射表(route-map)篇

    更多课程,请百度搜索“晁海江”。 通过4个实验,演示路由图在路由重分发、NAT中的功能,同时在实验5中,详细分析了,路由图在调用ACL的时候,ACL的动作对路由图起到的影响。 2015年7月29日:更新补充实验6:通过结合使用路由图和路由重分发,实现内网流量路径定义。

    9725 人正在学习 去看看 晁海江

ReactNative 用ListView实现GridView效果

直接上代码,多说无用. 先构造数据;

//构造数据
request() {
    const rowData = Array.from(new Array(15))
            .map((value, index) => ({text: "item " + index, clicked: 0}))
            .concat(this.state.listData);

    this.setState({
            isRefresh: false,
            listData: rowData,
        });
    }

根据实际情况封装你的GridView,这里简单展示实现的关键点

//关键点是定义flexDirection:"row",flexWrap:"wrap"这两个属性. 
GridView = (column,margin) => {
    return <ListView

        //显示竖直滚动条
        showsVerticalScrollIndicator = { true }

        //定义content的样式,这里是 contentContainerStyle,而不是style
        contentContainerStyle={{
        width: Dimensions.get("window").width,
        backgroundColor: "#ffffff",
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems:"center" }}

        //数据源
        dataSource={this.state.dataSource.cloneWithRows(this.state.listData)}

        //渲染Item
        renderRow={(rowData, index) => {
        let w = ( Dimensions.get("window").width - column * margin * 2 )
         / column;

        //这里是自已定义的ItemView
        return <CButton key={index} style={{width: w, height: 50,
        borderRadius: 5, margin: margin}} onPress={() => {
            ToastAndroid.show(rowData.text, ToastAndroid.SHORT)
        }} text={rowData.text}/>
        }}
        />
    }

然后在render数中调用这个方法即可

   render(){
       <View>
           ... ... 
           {this.GridView(3,5)}
           ... ...
       </View>
    }
2018-08-10 06:00:00 cpongo3 阅读数 24
  • -路由映射表(route-map)篇

    更多课程,请百度搜索“晁海江”。 通过4个实验,演示路由图在路由重分发、NAT中的功能,同时在实验5中,详细分析了,路由图在调用ACL的时候,ACL的动作对路由图起到的影响。 2015年7月29日:更新补充实验6:通过结合使用路由图和路由重分发,实现内网流量路径定义。

    9725 人正在学习 去看看 晁海江


***/node_modules/react-native-baidu-map/android/src/main/java/org/lovebing/reactnative/baidumap/BaiduMapPackage.javaError:(49, 5) 错误: 方法不会覆盖或实现超类型的方法

解决:@Override注释掉 貌似0.47后没有这个方法了。


然后下一个

Undefined is not an object(evaluating ‘_react2.PropTypes.bool’)

import PropTypes from 'prop-types';

解决:找到文件.../node_modules/react-native-baidu-map/js/MapView.js。把PropTypes 改成从 prop-types 中引入。




推荐您阅读更多有关于“”的文章

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