迷失图标
Lost with icons
我正在尝试添加一个带有多个选项的浮动操作按钮。当我尝试更改操作按钮项目的图标时,找不到图标并显示问号。
我导入了 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,但也没有用。
您遇到的问题是,您尝试使用尚未在 Vector-Icons Icons-Set 中实现的 Ionicons v5。如需选择图标请参考v4 - https://ionicons.com/v4/
在这里您可以看到您可以使用的图标。
android 类型图标的 md-iconname 和 Apple 图标的 ios-iconname。
我正在尝试添加一个带有多个选项的浮动操作按钮。当我尝试更改操作按钮项目的图标时,找不到图标并显示问号。
我导入了 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,但也没有用。
您遇到的问题是,您尝试使用尚未在 Vector-Icons Icons-Set 中实现的 Ionicons v5。如需选择图标请参考v4 - https://ionicons.com/v4/
在这里您可以看到您可以使用的图标。
android 类型图标的 md-iconname 和 Apple 图标的 ios-iconname。