Chaoszhu'Blog

Appearance

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" />
// ...

注意

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

WARNING

classname报错解决：https://github.com/ant-design/ant-design-mobile-rn/issues/1229#issuecomment-1102415741

组件使用 ​

组件list

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

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

自定义icons ​

...