【react-native】小結(jié)

一 底層

定義一個(gè)ui

  const itemShopName = (
    <View>
      <TouchableOpacity activeOpacity={1}
                        onPress={() => orderLineItemShopInfo(shopId)}>
        <Text style={ols.skuShop}>供應(yīng)商: {shopName}&gt;</Text>
      </TouchableOpacity>
    </View>
  );
  
  // 在頁(yè)面中調(diào)用
   {isShowShopInfoBtn && itemShopName}
   
  // isShowShopInfoBtn--> 是否要顯示拂蝎，這是外部傳過(guò)來(lái)的 使用 & 來(lái)做判斷猪瞬，是個(gè)bool 值

調(diào)用

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

通過(guò)參數(shù)傳遞將參數(shù)： isShowShopInfoBtn && shopName 分別傳遞過(guò)去

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}>供應(yīng)商: {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 || {};

二中層

中層傳遞參數(shù) 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}
              />

三層

實(shí)現(xiàn)方法昌犹，和彈窗，
1 導(dǎo)入頭文件

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

2 實(shí)現(xiàn) ui

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

3 實(shí)現(xiàn)func

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

彈窗

首先創(chuàng)建文件夾产舞，在創(chuàng)建文件 index.jsx 注意一定為.jsx的格式才可以

導(dǎo)入頭文件

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';

實(shí)現(xiàn)方法

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}>社會(huì)統(tǒng)一信用代碼：{tin}</Text>
           <Text style={storeInfoStyle.contentText}>供應(yīng)商公司名稱：{shopNames}</Text>
           <Text style={storeInfoStyle.contentText}>聯(lián)系人：{contactName}</Text>
           <Text style={storeInfoStyle.contentText}>聯(lián)系電話：{contactMobile}</Text>
           <Text style={storeInfoStyle.contentText}>公司地址：{address}</Text>
         </ScrollView>
       </View>
     </View>
   </Modal>
 )
}

在class文件內(nèi)調(diào)用和func內(nèi)不同

在class文件中使用的方法都不同，正常func文件內(nèi)引用定義屬性則是

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

但是在class則引入this 的概念 一切都以this 為基礎(chǔ)

在class內(nèi)方法的實(shí)現(xiàn)以及屬性的引入都遵循了 this 的規(guī)則，具體詳情見(jiàn) class Cart extends React.PureComponent 文件 整 購(gòu)