React Native 速成 002 — 使用 UI框架 React Native Elements

Posted 2023-04-06

参考技术A React Native Elements 是一款 React Native 的UI框架，风格配色均属上乘，框架封装了很多常用组件，用来搭建产品原型非常方便。

它的官方网站是 https://react-native-training.github.io/react-native-elements/

通过上一节的 CRNA 创建的 app，自带了react-native-vector-icons ，所以可以非常方便的安装它react-native-elements。

我们首先直接在 App.js 中试试它的组件吧。

我们先来尝试基础组件，其中有Button，Badge，Social Icon，Icon等，可以在 这里 查看它们的使用文档。

基础组件的使用比较简单，直接 import from 'react-native-elements' 后调用即可，这里不再详细叙述。我们主要看看一些常用的复杂组件。smart和dumb组件的划分可以看之前的文章。

首先我们来看 Card 卡片组件，通常用来显示一个或者系列项目。

这里我们在项目文件夹下添加 images 子文件夹，然后使用
image=require('./images/card.jpg')> 添加文件。
同时，也可以指定image的uri来添加图片
image=uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'>

效果如下：

倘若多个 Card 一个 View 里面放不下怎么办？

那我们将要使用 ScrollView。

ScrollView
是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal
属性来设置）。

这里我们引入它 import ScrollView from 'react-native';

然后将原先的 View 替换成 ScrollView 即可。

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView
中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件。之后我们也会学习 如何使用ListView 。

react-native字体react-native-vector-icons在ios下的使用

react-native字体react-native-vector-icons在ios下的使用

官网和网上有各种针对ios/android的安装和使用方法；能够使用了，基本就等于安装成功了。

react-native-vector-icons 的图标分为几个模块, 使用的时候先import FontAwesome from ‘react-native-vector-icons/FontAwesome‘; 这样才能使用 FontAwesome 标签, 标签内使用 name 字段指定是某个图标.

1. 项目添加依赖：

   yarn add react-native-vector-icons

2. 修改Podfile文件，使用CocoaPods对ios安装这个字体库：

   vim project_dir/ios/Podfile
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
   在ios目录下执行pod install，使用CocoaPods安装这个依赖

3. 修改Info.plist，添加：

   vim project_dir/ios/project_name/Info.plist，添加：
   <key>UIAppFonts</key>
   <array>
     <string>AntDesign.ttf</string>
     <string>Entypo.ttf</string>
     <string>EvilIcons.ttf</string>
     <string>Feather.ttf</string>
     <string>FontAwesome.ttf</string>
     <string>FontAwesome5_Brands.ttf</string>
     <string>FontAwesome5_Regular.ttf</string>
     <string>FontAwesome5_Solid.ttf</string>
     <string>Foundation.ttf</string>
     <string>Ionicons.ttf</string>
     <string>MaterialIcons.ttf</string>
     <string>MaterialCommunityIcons.ttf</string>
     <string>SimpleLineIcons.ttf</string>
     <string>Octicons.ttf</string>
     <string>Zocial.ttf</string>
   </array>

4. 简单实用

   import Icon from 'react-native-vector-icons/Ionicons';
   
   function ExampleView(props) {
     return <Icon name="ios-person" size={30} color="#4F8EF7" />;
   }
   
   不同的图标使用名字区分；上例的图标名字(Icon-->name)在[图标名字库](https://oblador.github.io/react-native-vector-icons/)里查找。
   在文件node_modules/react-native-vector-icons/glyphmaps/*.json里也可以看到所有图标的名字

5. android下的使用：据说项目添加依赖后(执行步骤1)执行下面的命令关联下就可以了，待验证

   react-native link react-native-vector-icons

参考：

1. https://www.npmjs.com/package/react-native-vector-icons#examples
2. https://oblador.github.io/react-native-vector-icons/
3. https://www.jianshu.com/p/2b74ba057287
4. https://blog.csdn.net/yingBi2014/article/details/102933684