迷失在图标中

Question

我正在尝试添加具有多个选项的浮动操作按钮。当我尝试更改操作按钮项目的图标时，未找到该图标并显示一个问号。

我导入了 Ionicons，因此我在该列表中检查要添加哪些按钮。我需要一个带有轮廓的加号，这是here：add-circle-outline

但是当我使用它而不是 md-create 时，找不到它，这很奇怪，因为找到了 md-create 并因此显示。当我在 ionicons 中搜索 md-create 时，找不到它，因此它必须来自另一个库。

我认为很明显我在这里迷路了。我阅读了有关将图标作为自定义字体的额外安装步骤，但我猜这不是必需的，因为 md-create 工作正常。

这是我的页面：

/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Scan from './Scan';
import Kowops from './Kowops';
import Wallet from './Wallet';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';

export class Main extends Component {
    render() {

        return (
            <View style={styles.container}>
            <View style={{alignItems: 'center'}}>
            <Text style={styles.plainText} onPress={() => this.props.navigation.navigate('Register')}>
            This is the main page, return to registration
            </Text>
            <View style={{height:5}}></View>
            </View>
            <View style={styles.FABContainer}>
            <ActionButton buttonColor="#c5e1a5">
                <ActionButton.Item 
                style={styles.actionButtonItem}
                buttonColor= '#c5e1a5'
                title="Add a thing" 
                onPress={() => console.log("notes tapped!")}
                >
                    <Icon name="md-create" style={styles.actionButtonIcon} />
                </ActionButton.Item>
            </ActionButton>
            </View>
            </View>
        )
    }
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
      <Tab.Navigator         
      tabBarOptions={{
        activeTintColor: 'black',
        inactiveBackgroundColor: '#c5e1a5',
        inactiveTintColor: 'gray',
        labelStyle: {fontSize: 14},
        style: 
        {
        backgroundColor: '#c5e1a5',
        borderTopColor: 'transparent',
        padding: 0,
        activeTabStyle: {
        fontWeight: 'bold',
        }
        },
        tabStyle: {
            borderRightColor: 'white',
            borderRightWidth: 1,
      }

      }}>


        <Tab.Screen name="Main" component={Main} />
        <Tab.Screen name="Scan" component={Scan} />
        <Tab.Screen name="Wallet" component={Wallet} />
        <Tab.Screen name="Kowops" component={Kowops} />
      </Tab.Navigator>
  );
}

export default function BottomNav() {
    return (

        <MyTabs />

    );
  }

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor:'#ffffff',
        padding: 10,
        alignItems: 'stretch',
        justifyContent: 'space-around'
    },
    logoContainer: {
        height: 120,
        padding: 10,
        alignItems: 'center' ,
        justifyContent: 'flex-end' 
    },
    logo: {
        height: 50,
        width: 165
    },
    formContainer: {
        flex:1,
        alignItems: 'center' ,
        justifyContent: 'center' 

    },
    buttonContainer: {
    padding: 10, 
    marginBottom: 20, 
    width: 250, 
    alignItems: 'center', 
    backgroundColor: '#c5e1a5'
  },
    inputTextField: {
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 10, 
            height: 40, 
            width: 250,
            marginBottom: 10,
            fontSize: 16,
            borderBottomWidth : 1.0,
    },
    plainText: {
        fontSize: 16,
        marginBottom: 5,
        color: '#59616e',
        textDecorationLine: 'underline',
    },
    actionButtonIcon: {
        fontSize: 20,
        height: 22,
        color: 'white',
      },
      FABCcontainer: {
        height: 22,
    },
    actionButtonItem: {

    },
});

而且。我唯一想做的就是将 md-create 更改为带有大纲的加号。

谁能帮帮我？

非常感谢！

我也尝试使用 [this icons list][2] 中的 add-circle-outline，但也没有用。

Answer 1

您的问题是，您尝试使用 Vector-Icons Icons-Set 中尚未实现的 Ionicons v5。如需选择Icon请参考v4 - https://ionicons.com/v4/

在这里你可以看到你可以使用的图标。

android 类型图标的 md-iconname 和苹果图标的 ios-iconname。