Reactネイティブフレックスボックスの整列アイコンとテキスト

Question

react nativeアプリでは、'react-native-vector-icons/MaterialIcons'を使用しています。

私は何かテキストのボタンを<にしようとします。残念ながら、<アイコンがテキストの中央に揃っていません。テキストは<と同じ行にありますが、中央揃えではなく下揃えです。

私はflex: 1を持っていませんでした。コードが更新されました。

私のコード

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

マイスタイル

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

答えはflex: 1なくheightを持つことです。私は2つの要素を持っているので、flexDirection: 'row'も使用します。あなたは、このような問題につまずく

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