如何将反应本机按钮设置为全宽答案

【问题标题】：how to set react native button to full width如何将反应本机按钮设置为全宽
【发布时间】：2016-07-27 08:30:05
【问题描述】：

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

如果我使用尺寸作为宽度，按钮宽度会离开屏幕。如果可能的话，我希望将徽标放在最顶部，将表单和按钮放在最按钮上。这仅适用于安卓系统。

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

【问题讨论】：

标签： android reactjs react-native flexbox

【解决方案1】：

在 react-native-elements 的最后一个版本（目前是 2.0.2）中为按钮添加一些漂亮的样式，可以使用属性 titleStyle(for text) 和 buttonStyle(for布局），然后你就可以写像 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'}} />

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你可以使用这个模式：

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

【讨论】：

【解决方案4】：

您应该从cardStyle 和cardActionStyle 中删除alignItems: 'center'，然后您应该得到一个全宽按钮。

【讨论】：

几乎完美！它适用于按钮，但随后会弄乱图像。任何想法如何做到这两点