最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】React Native iOS中使用navbar-native结果加载图标出错:Unrecognized font family ‘Ionicons’

React Native iOS crifan 3878浏览 0评论

折腾:

【基本解决】想要给React Native iOS的app中的导航栏中添加图标按钮

期间,用代码:

import { Container, Navbar } from ‘navbar-native’;
              <Navbar
                  title={"Navbar Native"}
                  left={{
                      icon: "ios-arrow-back",
                      label: "Back",
                      onPress: () => {alert(‘Go back!’)}
                  }}
                  right={[{
                      icon: "ios-search",
                      onPress: () => {alert(‘Search!’)}
                  },{
                      icon: "ios-menu",
                      onPress: () => {alert(‘Toggle menu!’)}
                  }]}
              />

结果:

Unrecognized font family ‘Ionicons’

就放弃了。

【后记1】

看到:

GitHub – redbaron76/navbar-native: a fully customizable navbar component for React-Native

中提到了:

想要icon工作,需要去参考:

GitHub – oblador/react-native-vector-icons: Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.

->

react-native-vector-icons directory

可以看到所有的图标。

➜  AwesomeProject npm install react-native-vector-icons –save
[email protected] node_modules/react-native-vector-icons

然后去看看fonts:

然后把字体拷贝过去:

也确定出线在了:

Copy Bundle Resources in Build Phases

然后Xcode中,重新Clean后再Build和Run

然后就可以正常显示icon图标了:

代码:

import { Container, Navbar } from ‘navbar-native’;
              <Navbar
                  title={"跟进客户"}
                  titleColor="white"
                  bgColor={NavigationBarBackgroundColor}
                  left={{
                      // icon: "ios-person",
                      // icon: "user-o",
                      icon: ‘ios-person-outline’,
                      iconColor: "white",
                      onPress: () => {alert(‘跳转到 个人中心’)}
                  }}
                  right={[{
                      icon: "ios-search",
                      iconColor: "white",
                      onPress: () => {alert(‘搜索’)}
                  }]}
              />

效果:

但是有点郁闷的又出错,所以去:

【已解决】ReactNative iOS中使用react-native-vector-icons中的图标无法正常显示:Warning Failed prop type Invalid prop name of value user-p supplied to Icon

转载请注明:在路上 » 【已解决】React Native iOS中使用navbar-native结果加载图标出错:Unrecognized font family ‘Ionicons’

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
90 queries in 0.529 seconds, using 21.96MB memory