RN增加底部导航栏图标（新手上路）

刚接触react navigation,想实现一个底部导航栏，发现只有title，没有图标，这哪成呀？？

要实现它，首先就要先用那个react-navigation,因为我要实现的是底部导航栏（TabNavigation），所以根据官网要求，先下载一系列的包吧，其中最主要的包是@react-navigation/native , @react-navigation/bottom-tabs(这个包是因为我要用的是底部导航栏，若要用抽屉，或者栈，要安装另外的包)，还有一系列的包。

总之，要安装：

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/native @react-navigation/bottom-tabs

代码如下：

创建一个底部导航对象

创建导航器根组件

4.此时的运行结果：

因为未加底部导航栏图标，所以我增加了一个组件，命名为Logo，暂时先别不管这里面写了什么

增加属性setOptions

在NavigationContainer中的Navigator下增加setOptions(这里可以注意一下，在Navigator下面也有个options,我用它定义了title属性为”食物“，如上代码)，

在setOptions里面，有个对象tabBarIcon，给他返回一个组件(可以返回一个size，以控制图标大小，color控制颜色，还有一个focused)：

<Logo/>就是我新增的图标组件，其中代码:

这样一增加后,运行效果：

注意：：：我在Logo组件里面使用的是Image，意思就是，在用样式的时候注意color属性，不要直接用（可以间接用）

目前为止，基本的已经实现了

优化：

按照官网上说的，可以通过route判断导航页面（通过name属性）,目前。我有两个导航页，一个food，一个movie,通过route.name判断导航页，然后判断点击与否（三目运算），点击就将iconname赋值为对应的值，然后将iconname传给<Logo/>,通过logo判断是要返回那张图片，<Logo/>代码如下：

这里通过props结构赋值获取到name属性，通过三目运算判断取哪张图片。

最后的运行结果：

【附上官网】/