react native 嵌套 h5 混合开发遇到的适配问题

1、ios  url 上如果有中文参数，那么ios页面跳转可能会跳转失败

ios url编码问题，编两次码就可以

const url = 'https://www.baidu.com?params=今天天气不错';
const url1 = encodeURI(url);   // 'https://www.baidu.com?params=%E4%BB%8A%E5%A4%A9%E5%A4%A9%E6%B0%94%E4%B8%8D%E9%94%99'
const url2 = encodeURI(url1);  // 'https://www.baidu.com?params=%25E4%25BB%258A%25E5%25A4%25A9%25E5%25A4%25A9%25E6%25B0%2594%25E4%25B8%258D%25E9%2594%2599'

2、ios input 框 autofocus 或者.focus 后，键盘没有弹出来问题 （ios的安全机制，必须用户唤起）

<Input
   ref={amountInputRef}
   type="number"
   className={isEditAmount ? 'can-edit-input' : 'not-edit-input'}
   value={rewardAmount}
   readOnly={!isEditAmount}
   onChange={val => handleInputChange(val)}
/>

 

 一开始是这样写的，发现 ios手机，输入框变成可编辑了，input也聚焦了，但是小键盘没有弹出来，点击也不行。必须失焦之后再点击才可以。

// 点击输入其他金额， input框变成可编辑状态
  const handleChangeInputStatus = () => {
    setIsEditAmount(true);
    amountInputRef?.current?.focus();
  };

修改后 先让输入框可编辑，然后再获取焦点，这样修改后，input框变成可编辑状态了，没有自动聚焦，用户点一下就可以唤起小键盘。 比上面的好一点的是 之前用户点击也没用

const handleChangeInputStatus = () => {
    setIsEditAmount(true);
// ios 安全机制 必须用户触发才能唤起键盘    amountInputRef?.current?.focus();    这句代码不能放在异步或函数里面，否则也会失效 
setTimeout(() => {
   amountInputRef?.current?.focus();
}, 500); };

如果一定要唤起键盘，可以参照这个网址提供的方法，我没试 https://www.bbsmax.com/A/kvJ3vv69zg/

 

3、使用  react-native-ui-lib  里的 TabBar  当限制 TabBar的宽度时（没有宽度100%），ios手机  TabBar右侧 会 有透明度，导致文字看不清

<TabBar
              data={tabs}
              onTabSelected={(item) => handleTabClick(item.key)}
              selectedLabelStyle={{
                fontSize: 18,
              }}
              containerWidth={280}
              // @ts-ignore
              minTabsForScroll={6} //红色字这两行是重点
              gradientMargins={-50}

   />