【react-native】小结

一 底层

定义一个ui

  const itemShopName = (
    <View>
      <TouchableOpacity activeOpacity={1}
                        onPress={() => orderLineItemShopInfo(shopId)}>
        <Text style={ols.skuShop}>供应商: {shopName}&gt;</Text>
      </TouchableOpacity>
    </View>
  );
  
  // 在页面中调用
   {isShowShopInfoBtn && itemShopName}
   
  // isShowShopInfoBtn--> 是否要显示，这是外部传过来的 使用 & 来做判断，是个bool 值

调用

return (
    <View style={ols.olItemWrapper} key={orderLineId}>
     {isShowShopInfoBtn && itemShopName}
    </View>       
          )

通过参数传递将参数： 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 = (
    <View>
      <TouchableOpacity activeOpacity={1}
                        onPress={() => orderLineItemShopInfo(shopId)}>
        <Text style={ols.skuShop}>供应商: {shopName}&gt;</Text>
      </TouchableOpacity>
    </View>
  );
  
return (
    <View style={ols.olItemWrapper} key={orderLineId}>
     {isShowShopInfoBtn && itemShopName}
    </View>       
          )
}

使用这种方式去获取值

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

二中层

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

 <OrderLineItem
                operatorId={order.operatorId}
                orderLine={ol}
                source={source}
                orderId={orderId}
                orderStatus={status}
                key={`${ol.orderLineId}-${idx}`}
                showOrderLineOps={showOrderLineOps}
                linkToOrderDetail={linkToOrderDetail}
                orderLineItemShopInfo={storeInfo}
                isShowShopInfoBtn={isShowShopInfoBtn}
              />

三层

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

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

2 实现 ui

      <OrderItem
        showStatus
        showSummary
        showOperations
        showOrderLineOps
        linkToOrderDetail
        order={order}
        orderLines={orderLines}
        refreshData={fetchData}
        buyAgain={handleBuyAgain}
        storeInfo={showStoreInfo}
        isShowShopInfoBtn={true}
      />
      

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 (
   <Modal
     popup
     style={[{ backgroundColor:'transparent' }, { touchAction: 'none' }]}
     visible={visible}
     maskClosable={false}
     animationType="slide-up"
     onClose={onClose}
   >
     <View style={storeInfoStyle.container}>
       <View style={[storeInfoStyle.containerView, { touchAction: 'none' }]}>
         <View style={storeInfoStyle.titleView}>
           <View style={storeInfoStyle.titleItemView}>
             <Image style={storeInfoStyle.titleIcon} source={shopInfoTitle} />
             <Text style={storeInfoStyle.titleText} numberOfLines={1}>{name}</Text>
           </View>
           <TouchableOpacity activeOpacity={1} onPress={onClose}>
             <Image style={storeInfoStyle.titleIconDel} source={shopInfoTitleDel} />
           </TouchableOpacity>
         </View>
         <ScrollView>
           <Text style={storeInfoStyle.contentText}>社会统一信用代码：{tin}</Text>
           <Text style={storeInfoStyle.contentText}>供应商公司名称：{shopNames}</Text>
           <Text style={storeInfoStyle.contentText}>联系人：{contactName}</Text>
           <Text style={storeInfoStyle.contentText}>联系电话：{contactMobile}</Text>
           <Text style={storeInfoStyle.contentText}>公司地址：{address}</Text>
         </ScrollView>
       </View>
     </View>
   </Modal>
 )
}

在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 文件 整 购