我正在尝试添加一个带有多个选项的浮动操作按钮。当我尝试更改操作按钮项目的图标时，找不到该图标并显示一个问号。
我导入了 Ionicons，所以我在该列表中检查要添加的按钮。我需要一个带轮廓的加号，这里是这个：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 更改为带有大纲的加号。
谁能帮我吗？
非常感谢！
我也尝试使用 add-circle-outline from [this icons list][2]，但也没有用。