反応：ネイティブ：フレックスボックスアラインメント

Question

私は比較的単純なレイアウトを持っています。なぜ緑色の呼び出しボタンがコンテナの右側に位置しないのかわかりません。 （緑色のボタンの右の枠線は、青色の鉛筆アイコンの右端に揃えます）。
フレックスボックスが正しく構成されていませんか？

ここでここでは、コード

<View style={styles.container}> 
    <View style={styles.rowContainer}> 
     <Text h3 style={{ flex: 1 }}>{contact.name}</Text> 
     <Icon 
       style={{ flex: 0 }} 
       name="edit" 
       onPress={this.handleEditContact} 
       color="royalblue" 
       size={20} 
       underlayColor="whitesmoke" 
       /> 

    </View> 
    <View style={[styles.rowContainer, {marginTop: 10}]}> 
     <PhoneText style={{ flex:1 }} 
        phone={contact.phone} /> 
     <Button buttonStyle={{ flex: 0 }} 
       title="Call" 
       iconRight 
       icon={{name:'phone'}} 
       backgroundColor='mediumseagreen' 
       borderRadius={5} 
       underlayColor='whitesmoke'/> 

    </View> 
    <Text>Notes:</Text> 
    <Text style={{ flexWrap: 'wrap' }}>{contact.notes}</Text> 
</View> 

は、スタイル定義されています：

const styles = StyleSheet.create({ 
    container:{ 
     flex: 1, 
     margin: 10, 
     padding: 10, 
     borderWidth: StyleSheet.hairlineWidth, 
     borderRadius: 5, 
     borderColor: 'gainsboro', 
     backgroundColor: 'white', 
    }, 
    rowContainer:{ 
     flex: 0, 
     flexDirection: 'row', 
     alignItems: 'center', 
    }, 
}); 

Answer 1

@ TimHのおかげで、ソースを見て、私が望む小道具が のcontainerViewStyleであり、buttonStyleではないことを発見しました。じゃあ...そう？

<Button containerViewStyle={{ marginRight: 0 }} .... /> 

Answer 2

このマージンが反応し、ネイティブの要素のボタンコンポーネントによって引き起こされます。ソースを調べると、コンテナが指定されたstyleObjectが見つかります。

container: { 
    backgroundColor: 'transparent', 
    marginLeft: 15, 
    marginRight: 15, 
}, 

marginRightプロパティを削除するだけで、希望通りの位置合わせができます。これは迅速な&の汚れた解決策になります。おそらく、Buttonコンポーネントの独自のフォークを作成する必要があります。私はあなたを助けることができればと思います。