react-native：flexbox 对齐

Question

我的布局相对简单，我不明白为什么绿色呼叫按钮不会与容器的右侧对齐。（绿色按钮的右边框应与蓝色铅笔图标的右边缘对齐）。
我的 flexbox 配置有误吗？

这是代码

<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

这个margin是react-native-elements的Button组件造成的。如果查看源代码，您会发现一个带有指定容器的 styleObject。

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

只需删除 marginRight 属性即可得到您想要的对齐方式。这将是一个快速而肮脏的解决方案。也许您应该创建自己的 Button 组件分支。我希望我能帮助你。

Answer 2

感谢@TimH 我查看了源代码发现我想要的道具是 containerViewStyle，而不是 buttonStyle。呃...对吗？

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

react-native：flexbox 对齐

react-native: flexbox alignment

react-native

flexbox

expo