如何设置React Native按钮为全宽

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"
}
};

- texas697

Answer 1

你应该从cardStyle和cardActionStyle中删除alignItems: 'center'，然后你就可以得到一个全宽度的按钮。

- Frederick Motte

---

几乎完美！它能够作用于按钮，但是它会弄乱图像。有什么想法可以同时实现两者？ - texas697

Answer 2

您可以使用此模式：

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

- Roman

Answer 3

在React Native中设置按钮的宽度和高度 让我们使用以下源代码来帮助设置按钮的宽度和高度。在这里，您需要在视图布局中指定按钮的宽度和高度参数。

<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
   <Button
      onPress={this.buttonClickListener}
      title="Button Three"
      color="#90A4AE"
    />
</View>

- sumit kumar pradhan

Answer 4

在最新版本的react-native-elements（当前版本为2.0.2），如果您想要为按钮添加一些漂亮的样式，可以使用titleStyle属性（用于文本）和buttonStyle属性（用于布局），然后您就能够编写类似width:'100%'的代码了。

<Button title="My great button" type="solid"  buttonStyle={{marginTop: 32, borderColor: 'red', borderWidth: 1, width: '100%', paddingVertical: 8}} titleStyle={{ color: 'white', fontWeight: 'bold'}} />

- Leonel Kahameni