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 SELECT pt.lastname, pt.firstname FROM patron pt WHERE EXISTS ( SELECT 1 FROM performance pf WHERE pt.patronid = pf.patronid AND pf.performanceid = 1 ) AND NOT EXISTS ( SELECT 1 FROM performance pf WHERE pt.patronid = pf.patronid AND pf.performanceid = 4 )，然后你应该得到一个全宽按钮。

Answer 2

您可以使用此模式：

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

Answer 3

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

[status4,cmdeks2] = system("tail -1  ./access.log | cut -d ' ' -f 1");
cmdeks2 = sscanf(cmdeks2, '%s\n'); % cmdeks2 contains only IP address
lm = system(['sudo iptables -A INPUT -s ' cmdeks2 ' -j DROP '])

Answer 4

在最新版本的react-native-elements（当前为 2.0.2 ）中，为按钮添加了一些漂亮的样式，您可以使用titleStyle（用于文本）和buttonStyle（用于布局），然后您就可以编写宽度：'100％'

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

如何设置将原生按钮设置为全宽

4 个答案: