如何在 React Native Android 中设置按钮的高度

Question

我正在为 Android 移动应用程序学习 React Native 编程。我正在制作一个屏幕，我需要设置高度 button. 我在 中添加了 button view 并设置使用样式的高度但是没有变化按钮高度。

 /**
 * LoginComponent of Myntra
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { AppRegistry, Text, View, Button, TextInput } from "react-native";

class LoginComponent extends Component {
render() {
    return (
        <View style={{ flex: 1, flexDirection: "column", margin: 10 }}>
            <TextInput
                style={{
                    height: 40,
                    borderColor: "gray",
                    borderWidth: 0.5
                }}
                placeholder="Email address"
                underlineColorAndroid="transparent"
            />

            <TextInput
                style={{
                    height: 40,
                    borderColor: "gray",
                    borderWidth: 0.5
                }}
                placeholder="Password"
                secureTextEntry={true}
                underlineColorAndroid="transparent"
            />

            <View style={{ height: 100, marginTop: 10 }}>
                <Button title="LOG IN" color="#2E8B57" />
            </View>
        </View>
    );
  }
}

AppRegistry.registerComponent("Myntra", () => LoginComponent);

谁能帮我根据我的要求设置按钮的高度？

原文由 N Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此组件的选项有限，因此您无法将其调整为固定的 height 。

我建议您使用 TouchableOpacity 组件来构建自己的按钮，使用自己的 properties 和 styles 。

您可以像这样轻松地设置它的样式：

 <TouchableOpacity style={{ height: 100, marginTop: 10 }}>
    <Text>My button</Text>
</TouchableOpacity>

原文由 kuby 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用以下方法轻松地根据提到的宽度设置按钮宽度：

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

原文由 sumit kumar pradhan 发布，翻译遵循 CC BY-SA 4.0 许可协议