React Doğal esnek kutu hizalama simgesi ve metni

Question

react native uygulamasında, 'react-native-vector-icons/MaterialIcons' kullanıyorum.

Bazı metinlerle bir < düğmeyi denerim. Ne yazık ki, < simgesi metnin ortasına hizalanmamış. Metin, < ile aynı çizgide, ancak orta hizalı yerine alt hizalanmış.

flex: 1 kodlamadım. Kod güncellendi.

Kodum

<TouchableOpacity style={styles.navBarLeftButton}> 
     <Icon name="chevron-left" /> 
     <Text style={styles.buttonText}>My Button</Text> 
    </TouchableOpacity> 

Benim stilleri

navBarLeftButton: { 
     flex: 1, 
     flexDirection: 'row', 
     alignItems: 'center', 
     justifyContent: 'flex-start' 
     width: 100, 
     paddingLeft: 8 
    } 

    buttonText: { 
     color: 'rgba(255,255,255,0.70)', 
     fontSize: 14 
    } 

Answer 1

cevap flex: 1 değil height sahip olmaktır. Ben de iki elemanım olduğu için flexDirection: 'row' kullanıyorum. Böyle konuya takılmaları

navBarLeftButton: { 
    paddingLeft: 8, 
    width: 100, 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'center', 
    justifyContent: 'flex-start' 
}