Я пытаюсь создать кнопку со значком плюса по центру посередине, однако, если я использую React-native-vector-icons, то у нее будет дополнительное пространство внизу, а если я использую <Text>+</Text>, у него будет дополнительное пространство вверху. Я пробовал решения из React Native: идеально выровнять текст по кругу, но пока ничего не помогло.
Код кнопки:
<View>
<Pressable
style = {styles.button}
onPress = {() => navigation.navigate('Add Habit')}>
<Icon name = "plus" size = {40} color = {'black'} />
</Pressable>
</View>
const styles = StyleSheet.create({
button: {
backgroundColor: '#219ebc',
width: 75,
height: 75,
borderRadius: 100,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
elevation: 3,
position: 'absolute',
bottom: 10,
right: 10,
lineHeight: 0,
},
});
🤔 А знаете ли вы, что...
С помощью CSS можно управлять порядком слоев и прозрачностью элементов на веб-странице.
Существует небольшое смещение, поскольку используемый значок имеет другой размер. Вы можете использовать другие значки, например FontAwesome5, FontAwesome6 или другие из библиотеки. Если вы используете тот же значок, вы можете принудительно выровнять его, преобразуя с помощью translateY, это справедливо и для текста.
import { FontAwesome, FontAwesome5, FontAwesome6 } from '@expo/vector-icons';
export default function App() {
return (
<SafeAreaView style = {styles.container}>
<Pressable
style = {styles.button}
onPress = {() => alert('The button was pressed!')}
>
<FontAwesome style = {styles.iconBg} name = "plus" size = {40} color = "black" />
</Pressable>
<Pressable
style = {styles.button}
onPress = {() => alert('The button was pressed!')}
>
<FontAwesome style = {[styles.iconBg, styles.iconCentered]} name = "plus" size = {40} color = "black" />
</Pressable>
<Pressable
style = {styles.button}
onPress = {() => alert('The button was pressed!')}
>
<FontAwesome5 style = {styles.iconBg} name = "plus" size = {40} color = "black" />
</Pressable>
<Pressable
style = {styles.button}
onPress = {() => alert('The button was pressed!')}
>
<FontAwesome6 style = {styles.iconBg} name = "plus" size = {40} color = "black" />
</Pressable>
<Pressable
style = {styles.button}
onPress = {() => alert('The button was pressed!')}
>
<Text style = {[styles.iconBg, styles.text]}>+</Text>
</Pressable>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ecf0f1',
},
iconBg: {
// Comment the next line to remove the bgColor
backgroundColor: 'white',
},
iconCentered: {
transform: [
{
translateY: 1.5
}
]
},
text: {
fontSize: 40,
lineHeight: 40,
textAlignVertical: 'center',
},
button: {
backgroundColor: '#219ebc',
width: 75,
height: 75,
borderRadius: 75,
justifyContent: 'center',
alignItems: 'center',
elevation: 3,
},
});
Полный пример вы можете увидеть на этой Expo Snack.
Я использовал @expo/vector-icons, потому что там используется
react-native-vector-icons.