【react-native】小结

【react-native】小结

一 底层

定义一个ui

  const itemShopName = (
    
       orderLineItemShopInfo(shopId)}>
        供应商: {shopName}>
      
    
  );
  
  // 在页面中调用
   {isShowShopInfoBtn && itemShopName}
   
  // isShowShopInfoBtn--> 是否要显示，这是外部传过来的 使用 & 来做判断，是个bool 值

调用

return (
    
     {isShowShopInfoBtn && itemShopName}
           
          )

通过参数传递将参数： isShowShopInfoBtn && shopName 分别传递过去

function OrderLineItem({ operatorId, orderId, orderLine, showOrderLineOps, showOrderLineStatus, orderStatus, source, linkToOrderDetail,orderLineItemShopInfo ,isShowShopInfoBtn}) {
const { orderLineId, shopName, shopId, skuInfo = {}, quantity, displayFee, isGift, operations = [], extraInfo, status, bizCode, isPreSale = false } = orderLine;
  const { courseType } = extraInfo || {};

  const itemShopName = (
    
       orderLineItemShopInfo(shopId)}>
        供应商: {shopName}>
      
    
  );
  
return (
    
     {isShowShopInfoBtn && itemShopName}
           
          )
}

使用这种方式去获取值

const { orderLineId, shopName, shopId, skuInfo = {}, quantity, displayFee, isGift, operations = [], extraInfo, status, bizCode, isPreSale = false } = orderLine;
const { courseType } = extraInfo || {};

二中层

中层传递参数 orderLineItemShopInfo={storeInfo} && isShowShopInfoBtn={isShowShopInfoBtn}

三层

实现方法，和弹窗，
1 导入头文件

import OrderItem from 'order/children/order-item';

2 实现 ui

3 实现func

  async  function showStoreInfo(shopId) {
  
    setViewLoading(true);
    try {
      getEnterpriseDetails({operatorId:operatorId||sellerId,id:shopId})
        .then((data) => {
        //  console.log('返回的数据: ',data);
          setStoreInfoData(data);
          setShowStoreInfoModal(true);
        })
        .finally(() => setViewLoading(false));
    } catch (error) {
      setViewLoading(false);
      Toast.info(error.errorFields[0].errors[0], 2);
    }
  }

弹窗

首先创建文件夹，在创建文件 index.jsx 注意一定为.jsx的格式才可以

导入头文件

import React, { useState, useEffect } from 'react';
import { View, Text,Image,TouchableOpacity,ScrollView} from 'react-native';
import { Modal } from '@terminus/nusi-mobile' // 弹窗的文件
import shopInfoTitle from "images/shopInfoTitle.png"; // 图片
import shopInfoTitleDel from "images/shopInfoTitleDel.png";

import { storeInfoStyle } from './style';

实现方法

export default function(props) {
 const { visible,storeInfoData, onClose } = props;
 const { name,tin,shopNames,extra,address } = storeInfoData || {};
 const { contactName,contactMobile } = extra || {};

//  console.log('storeInfoData: ',storeInfoData);
 return (
   
     
       
         
           
             
             {name}
           
           
             
           
         
         
           社会统一信用代码：{tin}
           供应商公司名称：{shopNames}
           联系人：{contactName}
           联系电话：{contactMobile}
           公司地址：{address}
         
       
     
   
 )
}

在class文件内调用和func内不同

在class文件中使用的方法都不同，正常func文件内引用定义属性则是

  const [searchHistory, setSearchHistory] = useState([]);
  const [isViewLoading, setViewLoading] = useState(false);
  const [showStoreInfoModal, setShowStoreInfoModal] = useState(false);

但是在class则引入this 的概念 一切都以this 为基础

在class内方法的实现以及属性的引入都遵循了 this 的规则，具体详情见 class Cart extends React.PureComponent 文件 整 购