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

Question

我正在学习为Android移动应用程序编写React Native程序。 我正在制作一个屏幕，需要设置按钮的高度。 我已经将按钮添加到视图中，并使用样式设置其高度，但是按钮的高度没有发生变化。

/**
 * 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

Answer 1

这个组件选项有限，所以你不能将其调整为固定的 height。

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

你可以轻松地像这样设置其样式：

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

- kuby

---

我的天啊!!! 我刚开始使用React Native就讨厌它了，哈哈。样式方面有太多的限制。 - jeanm

Answer 2

您可以使用以下方法轻松设置按钮宽度，根据所述宽度进行设置：

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

- sumit kumar pradhan

---

非常好的回答，但是OP特别询问了如何设置高度。 - mrstebo

使用TouchableOpacity组件的原因是因为不幸地无法更改Button组件的高度。 - mrstebo

我们可以使用以下代码改变按钮的宽度和高度： <View style={[{ width: "50%", height: "50%",margin: 10, backgroundColor: "red" }]}> <Button onPress={this.buttonClickListener} title="Button Three" color="#FF3D00" /> </View> - sumit kumar pradhan

给 @sumitkumarpradhan：我已经测试过了，宽度可以正常工作，但高度无法正常工作，至少在设置style={{flex:1}}时是这样。将高度从0％设置为100％最终得到的按钮高度相同。 - xuancong84

尝试这个：<View style={[{ width: "50%", height: "50%",margin: 10, backgroundColor: "red" }]}> <Button onPress={this.buttonClickListener} title="Button Three" color="#FF3D00" /> </View> - sumit kumar pradhan

Answer 3

最好的解决方案是使用minHeight或maxHeight代替使用Height常量。

- user3107831

Answer 4

通常情况下，我们希望改变按钮的尺寸，而默认情况下它是延伸到父元素的整个宽度。虽然减小宽度不是问题——只需减小父元素的宽度即可，但更改高度就有问题了。按钮元素没有样式属性，因此除了在iOS上更改文本颜色和在Android上更改背景颜色之外，我们无法在其中设置太多内容。

为了更好地控制按钮，最好使用TouchableOpacity或TouchableNativeFeedback。

TouchableOpacity功能组件示例 -

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;

- Abhishek Kumar

Answer 5

组件 Button 支持最小程度的自定义，因此您需要使用其他组件。

您可以使用：Pressable 或 TouchableOpacity，

<Pressable onPress={onPressFunction} style={styles.yourButtonStyle}>
    <Text>I'm pressable!</Text>
</Pressable

const styles = StyleSheet.create({
  yourButtonStyle: {
   ...
  }
});

文档按钮

- Anroche

Answer 6

<View style={styles.btnContainer}>
  <TouchableOpacity>
    <Button style={styles.btnSize}>
      <Text>Change Address</Text>
    </Button>
  </TouchableOpacity>
  <TouchableOpacity>
    <Button style={styles.btnSize}>
      <Text>Change Address</Text>
    </Button>
  </TouchableOpacity>
</View>

样式表代码片段

const styles = StyleSheet.create({
    btnContainer:{
        flexDirection:"row",
        justifyContent:"space-between"
    },
    btnSize:{
        width:"100%"
    }
})

- Siva_Stu

---

这段代码会抛出一个错误。而且，在TouchableOpacity元素内部放置Button元素毫无意义。保留TouchableOpacity，或者将Button放在通用View中添加样式对象。 - David S