Блог

Главная - Вопросы по программированию - Как написать текст в одной строке внутри значка на панели вкладок?

Как написать текст в одной строке внутри значка на панели вкладок?

#css #react-native

Вопрос:

У меня проблема с текстом TabBar , который не написан в той же строке, как показано на фотографии. На маленьком экране (Iphone 12) он работает отлично, но когда я перешел на большой экран (Ipad 12,9 дюйма) Как я могу это предотвратить?

У меня есть свой код:

 <Tab.Screen
          name="Shop"
          component={ShopNavigator}
          options={(navigation, route) => ({
            title: 'Shop',
            tabBarVisible: false,
            tabBarIcon: ({ props, focused }) => (
              <View {...props} >
              <View style={{flex: 2, alignItems: 'center'}}>
                <Image source={SHOP} resizeMode="contain" style={[styles.imgSize, focused amp;amp; { opacity:1 }]} />
                <Text style={[styles.label, focused amp;amp; { opacity:1, textDecorationLine: 'underline' }]}>Vente en ligne</Text>
              </View>
            </View>
            )
          })}
/> 
 imgSize: {
    height: 30,
    width: 30,
    padding: 15,
    opacity: 0.8,
  },
  label: {
    color: '#FFF',
    fontSize: 10,
    textAlign: 'center',
    fontFamily: 'Barlow-Bold',
    opacity: 0.8,
  }

Ответ №1:

Просто дайте ему больше места:

 label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
width: "100%" //should take. 100% of the available space
}

Я бы также добавил numberOfLines = 1 опору в Text компонент, чтобы предотвратить невероятно маленькие экраны

Метки: