如何将本机按钮设置为全宽

Question

我已经尝试了所有示例，但无法弄清楚。我正在使用这个https://github.com/xinthink/react-native-material-kit

如果我使用尺寸作为宽度，则按钮宽度会超出屏幕。如果可能的话，我希望徽标位于最上方，表单和按钮位于最上方。这仅适用于android。

 const btnStyle = {
btn: {
    flex: 1,
    flexDirection: "row"
    //resizeMode: 'cover'
}
};
const ColoredRaisedButton = MKButton.coloredButton()
.withStyle(btnStyle.btn)
.build();

<ScrollView style={styles.scrollView}>
<View style={styles.container}>
    {/* Here the magic happens*/}
    <View style={styles.cardStyle}>
        <Image
            source={require("./../img/logo_login.jpg")}
            style={styles.cardImageStyle}
        />
        <View style={styles.cardContentStyle}>
            <Form
                ref="form"
                type={User}
                onChange={this.onChange.bind(this)}
                value={this.state.value}
                options={options}
            />
        </View>
        <View style={styles.cardActionStyle}>
            <ColoredRaisedButton>
                <Text pointerEvents="none" style={styles.buttonText}>
                    BUTTON
                </Text>
            </ColoredRaisedButton>
        </View>
    </View>
</View>
</ScrollView>;

const styles = {
cardStyle: {
    flex: 1,
    backgroundColor: "#ffffff",
    borderRadius: 2,
    borderColor: "#ffffff",
    borderWidth: 1,
    shadowColor: "rgba(0,0,0,.12)",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center",
    shadowOffset: {
        height: 1,
        width: 2
    }
},
cardImageStyle: {
    flex: 1,
    height: 170,
    flexDirection: "row",
    resizeMode: "cover"
},
cardContentStyle: {
    padding: 15 //,
    // bottom:0,
    // position:'absolute',
    //justifyContent: 'flex-end'
},
cardActionStyle: {
    flex: 1,
    borderStyle: "solid",
    borderTopColor: "rgba(0,0,0,.1)",
    borderTopWidth: 1,
    padding: 15,
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center"
},
scrollView: {
    flex: 1
},
container: {
    flex: 1,
    alignItems: "stretch",
    backgroundColor: "#eae9e9",
    padding: 20 //,
    //position:'absolute'
},
buttonText: {
    fontSize: 14,
    fontWeight: "bold",
    color: "white"
}
};

Answer 1

您应该同时alignItems: 'center'从cardStyle＆和中删除cardActionStyle，然后应该获得一个全角按钮。

Answer 2

您可以使用此模式：

<View style={[{width:"100%"}]}>
    <Button
        onPress={this.closeModal}
        title="Close"
        color="#841584"
        style={[{borderRadius: 5,}]}
        hardwareAccelerated
    />
</View>