React Native：在 BottomTab 上显示图标

Question

我是 react-native 的新手，我正在开发一个应用程序。

下面的代码是一个简单的 react-native 应用程序，它接受 input1 和 input2 作为数字，并动态生成 input1 和 input2 的总和结果。

但问题是我无法在 Bottomsheet 上加载图标。

请在下面找到代码和屏幕截图。

App.js

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Icon from 'react-native-ionicons'

const Tab = createBottomTabNavigator();

const SimpleCalc = () => {
    const [ input1, setInput1 ] = useState(0);
    const [ input2, setInput2 ] = useState(0);

    const HomeScreen = () => {
        return (
            <View style={{ padding: 20 }}>
                <View>
                    <Text style={{ fontSize: 20, color: '#000' }}>{ parseFloat(input1) + parseFloat(input2) }</Text>
                </View>
                <View>
                    <TextInput 
                        placeholder="Enter Input 1"
                        onChangeText = {(text) => { setInput1(text); }}
                        value = {input1 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                    <TextInput 
                        placeholder="Enter Input 2"
                        onChangeText = {(text) => { setInput2(text); }}
                        value = {input2 + ''}
                        style={{ color: '#000' }}
                        keyboardType='numeric'
                    />
                </View>
            </View>
        )
    }

    const SettingScreen = () => {
        return (
            <Text>Setting Screen</Text>
        );
    }
    return (
        <NavigationContainer>
            <Tab.Navigator>
                 <Tab.Screen name="Home" component={HomeScreen} 
                   options={{ 
                     tabBarLabel: 'Salary', 
                     headerShown: false, 
                     tabBarIcon: ({ color, size }) => <Icon name="add" size={size} color="#000" />
                   }} />
                 <Tab.Screen name="Settings" component={SettingScreen} options={{ tabBarLabel: 'Settings', activeTintColor: '#6F2DA8', headerShown: false }} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default SimpleCalc;

Package.json

{
  "name": "SimpleCalc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "install": "^0.13.0",
    "npm": "^8.3.1",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-ionicons": "^4.6.5",
    "react-native-material-textinput": "^1.3.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

截图

请帮我解决这个问题

Answer 1

tabBarIcon is a function that is given the focused state, color, and size params.

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{ tabBarIcon: ({ focused, color, size }) => <IconComponent /> }}
/>

此外，您可以集中 tabBarIcon 并将其移动到 <Tab.Navigator> 组件：

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;

      if (route.name === "Home") {
        iconName = focused
          ? "ios-information-circle"
          : "ios-information-circle-outline";
      } else if (route.name === "Settings") {
        iconName = focused ? "ios-list-box" : "ios-list";
      }

      // You can return any component that you like here!
      return <Ionicons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: "tomato",
    tabBarInactiveTintColor: "gray",
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

详细了解 customizing the appearance of the BottomTabs navigation in the official documentation。

Answer 2

图标字体未与应用程序中的其他 UI 元素同步运行 time.To 解决问题，编辑 android/app/build.gradle（不是 android/build.gradle）并添加以下：

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

React Native：在 BottomTab 上显示图标

React Native: Show Icon on BottomTab

react-native

react-android

react-navigation