Taro入门合集，新手小白也可以做项目（3）共86

紧接前面的两篇，接下来我们开始引入UI库以帮助我们快速实现布局，😊开始的小伙伴，全体起立，2025年我们要将Taro/React死磕到底🤔！

Taro入门合集，新手小白也可以做项目（1）共86_taro 项目-优快云博客

一、安装UI库

这里我选择的是taro-ui

npm install taro-ui

这里出现了一点小插曲😄，希望你不会有 

备注：版本兼容报错时 执行命令 npm install taro-ui --legacy-peer-deps

安装完毕，就可以在入口处引入样式开始，看似一切正常：

看报错是路径问题，修改如下：

@import "taro-ui/dist/style/index.scss";

二、使用组件

以搜索框组件为例

import React, { useState } from "react";
import { AtSearchBar } from "taro-ui";


export default function Index() {
  const [topSearchValue, setTopSearchValue] = useState("");
  const onChange = (value: string) => {
    setTopSearchValue(value);
  };
  const onActionClick = () => {
    console.log(topSearchValue);
  };
  return (
    <View className="index">
        <AtSearchBar
          actionName="搜一下"
          value={topSearchValue}
          onChange={onChange}
          onActionClick={onActionClick}
        />
      </View>)

好了，今天先这些，不要喷我水😬，后面会继续分享

Manus

天花乱坠，花里胡哨 😂 也是不变的套路，饥饿营销🤔！！