Skip to content
On this page

ant-design与icons引用

ant-design

yarn add @ant-design/react-native

yarn add @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler 安装对等(peer)依赖,避免不必要的依赖重复下载

npx react-native link 需手动link,icons资源才会被加载到android和ios目录中

  • 重新构建项目: yarn android

icons引用

ant-design-icons合集

js
import { Icon } from '@ant-design/react-native'

// ...
<Icon name="mobile" size="md" color="#fff" />
// ...
import { Icon } from '@ant-design/react-native'

// ...
<Icon name="mobile" size="md" color="#fff" />
// ...

注意

在重新构建后如发现引用icon组件并展示乱码;尝试 cd android && .\gradlew clean后重新构建 yarn android

组件使用

组件list

js
import { SearchBar } from '@ant-design/react-native'

// ...
<SearchBar placeholder="Search" showCancelButton={true} />
// ...
import { SearchBar } from '@ant-design/react-native'

// ...
<SearchBar placeholder="Search" showCancelButton={true} />
// ...

自定义icons

...