React Native alignItems не работает должным образом в представлении

Question

Как вы видите прикрепленное изображение, я установил элемент выравнивания как по центру со значком и текстом. Однако я не знаю, почему значок не выровнен. Есть ли у вас какие-либо идеи?

...
                <View style={styles.nameElement}>
                  <TouchableOpacity>
                    <MaterialCommunityIcons name="calendar" size={26} />
                    <Text>Calendar</Text>
                    {/* <MaterialCommunityIcons name="calendar-alert" size={26} /> */}
                  </TouchableOpacity>
                </View>
...

const styles = StyleSheet.create({
...
  nameElement: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
...
})

Answer 1

Потому что вы устанавливаете стиль alignItem и justifyContent только для компонента <View>, который не является вашим значком и текстовым контейнером в вашем случае.

Таким образом, вы должны установить <TouchableOpacity style={{alignItems: 'center'}}>

Answer 2

попробуйте это

<View style={styles.nameElement}>
  <TouchableOpacity style={{alignItems: "center",
    justifyContent: "center",}}>
    <MaterialCommunityIcons name="calendar" size={26} />
    <Text>Calendar</Text>
    {/* <MaterialCommunityIcons name="calendar-alert" size={26} /> */}
  </TouchableOpacity>
</View>