React native 迷失与图标

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

我导入了Ionicons，所以我在列表中检查要添加的按钮。我需要一个加上轮廓，这是一个：添加圆形轮廓

但是当我用它代替md create时，它没有被找到，这很奇怪，因为md create被找到并显示出来。当我在ionicons中搜索md create时，找不到它，所以它必须来自另一个库

我想很明显我在这里迷路了。我读过关于图标作为自定义字体的额外安装步骤，但我猜这不是必需的，因为mdcreate工作正常

这是我的页面：

/* 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: {

    },
});

/*eslint禁用prettier/prettier*/
从“React”导入React，{Component}；
从“react native”导入{Text，View，StyleSheet}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“./Scan”导入扫描；
从“/Kowops”导入Kowops；
从“./钱包”导入钱包；
从“反应本机操作按钮”导入操作按钮；
从“反应本机矢量图标/离子图标”导入图标；
导出类主扩展组件{
render（）{
返回(
this.props.navigation.navigate（'Register'）}>
这是主页，返回注册
console.log（“notes tapped！”）}
>
)
}
}
const Tab=createBottomTabNavigator（）；
函数MyTabs（）{
返回(
);
}
导出默认函数BottomNav（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：2，
背景颜色：“#ffffff”，
填充：10，
对齐项目：“拉伸”，
为内容辩护：“周围的空间”
},
标识容器：{
身高：120，
填充：10，
对齐项目：“居中”，
justifyContent:“柔性端”
},
标志：{
身高：50，
宽度：165
},
formContainer：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”
},
按钮容器：{
填充：10，
marginBottom:20，
宽度：250，
对齐项目：“居中”，
背景颜色：“#c5e1a5”
},
InputExtField：{
对齐项目：“居中”，
justifyContent:'之间的空间'，
填充：10，
身高：40，
宽度：250，
marginBottom:10，
尺寸：16，
边框底部宽度：1.0，
},
明文：{
尺寸：16，
marginBottom:5，
颜色：“#59616e”，
textDecorationLine:“下划线”，
},
行动按钮尼康：{
尺寸：20，
身高：22，
颜色：'白色'，
},
制造容器：{
身高：22，
},
actionButtonItem：{
},
});

和。我想做的唯一一件事就是用大纲在plus中更改md create

有人能帮我吗

非常感谢

---

我还尝试使用[code>[此图标列表][2]中的“添加圆轮廓”，但也不起作用。

您案例中的问题是，您尝试使用尚未在矢量图标集中实现的Ionicons v5。如果需要选择图标，请参考v4-

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

---

md图标名用于android类型图标，ios图标名用于apple图标。

您是否使用IonIcons v4获得了图标？请提供一些反馈。