【react-native】小结-3 - 兼容web

import { Modal, Toast } from '@terminus/nusi-mobile'
Toast.success('加入购物车成功', 1);
// ------------------------------------------
// 转换为int 10进制
let resNumber = *parseInt(multiple,10);

组件相关

import CommonModal from 'common/modal';
// 注意： 属性 maskClosable={false} 必须为false否则在android上出现闪频，ios上却会正常。
const webStoreInfoModal = () => {
  return (
    <CommonModal
      visible={showStoreInfoModal}
      maskClosable={false}
      onClose={() => { this.setState({ showStoreInfoModal: false })}}
      titleColor={{color: '#fff'}}
      title="输入购买数量"
      style={{ width: '100%', height: 200 }}
      headerStyle={{ backgroundColor:'#ffffff' }}
      closeIconColor={{ color: '#fff' }}
    >
        <ShopInfoView
          visible={showStoreInfoModal}
          storeInfoData={storeInfoData}
          onClose={this.onCloseInputQty}

        />
    </CommonModal>
  )
};

add

import { isWeb } from "utils/platform";
{
 isWeb
   ? webStoreInfoModal()
   : (
     <StoreInfoModal
       visible={showStoreInfoModal}
       storeInfoData={storeInfoData}
       onClose={this.onCloseInputQty}
     />
   )
}

action

<CartDetail
  isEdit={isEdit}
  cartLinesCheckedMap={cartLinesCheckedMap}
  updateCartLinesCheckedMap={this.updateCartLinesCheckedMap}
  cartData={cartData}
  asyncFuncWrap={this.asyncFuncWrap}
  gotoPreOrder={this.gotoPreOrder}
  handleInputQty={this.handleInputQty}
/>

items

// 注意       maskClosable={false} 在h5中此属性可以开启。
export default function (props) {
  const { visible, onClose } = props;
  return (
    <Modal
      popup
      style={[{ backgroundColor: 'transparent' }, { touchAction: 'none' }]}
      visible={visible}
      maskClosable={false}
      animationType="slide-up"
      onClose={onClose}
    >
      {
        ShopInfoView(props)
      }

    </Modal>
  )
}

设置 Modal 界面内弹出的高度的view，在iPhone中，键盘会覆盖输入框，所以修改这个 minHeight 和 maxHeight 以及内部的 scrollView 的 maxHeight 即可解决问题，目前在6~12所有设备中默认高度测试不会出现键盘覆盖的问题。

export default createStyle({
  container: {
    paddingTop: 12,
    paddingHorizontal: 12,
    paddingBottom: 12 + SafeBottomInset,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,

    minHeight: deviceHeight - 300,
    maxHeight: deviceHeight - 200,
  },
  scrollView: {
    paddingRight: 12,
    paddingBottom: 20,
    maxHeight: deviceHeight - 300,

  },
})

键盘的监听

// 键盘隐藏 做监听
useEffect(() => {
  Keyboard.addListener("keyboardDidHide", keyboardDidHide);
  return () => {
    Keyboard.removeListener("keyboardDidHide", keyboardDidHide);
  };
}, [quantity,multiple]);

function keyboardDidHide() {

}

function 和 const 等价交换

// 根据点击的销售属性圈定选中的 sku
const selectedItem = skuInfo.withStockSku.find((skuItem) => {
  let isChosen = true
  skuItem.skuInfo.attributes.find((attr) => {
    // 当一个销售属性与目标属性不一致 即表明此sku不是选中sku
    if (resultAttr[attr.attrKey] !== attr.attrVal) {
      isChosen = false
      return true
    }
    return false
  })
  return isChosen
})

const onPress = async (goto, params) => {
  // to do.....
}
// 等价于
async function onPress(goto, params) {
  // to do.....
}
// 主要区别，在 const 内输出 console.log() 无法输出，因为是静态变量，在 function 内是可以输出的。