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

【问题标题】：How to set the height of button in React Native Android如何在 React Native Android 中设置按钮的高度
【发布时间】：2017-06-06 06:46:56
【问题描述】：

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

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

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

【问题讨论】：

标签： android reactjs react-native react-native-android

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

很好的答案，但 OP 专门询问设置高度
为此，我们需要使用css设计的height属性。
之所以使用TouchableOpacity组件，是因为很遗憾不能改变Button组件的高度。
我们可以使用下面的代码来改变按钮的宽度和高度：<View style={[{ width: "50%", height: "50%",margin: 10, backgroundColor: "red" }]}> <Button onPress={this.buttonClickListener} title="Button Three" color="#FF3D00" /> </View>
致@sumitkumarpradhan，我已经测试过：宽度有效，但高度无效。至少在设置 style={{flex:1}} 时。将高度从 0% 设置为 100% 最终会得到一个相同高度的按钮。

【解决方案3】：

最好的解决方案是使用 minHeight 或 maxHeight 而不是使用 Height const。

【讨论】：

【解决方案4】：

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

样式表代码sn-p

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

【讨论】：

【解决方案5】：

我们经常想改变按钮的尺寸，默认情况下会扩展到父元素的整个宽度。虽然减小它的宽度不是问题——减小父级的宽度就足够了，但是改变高度已经是有问题的了。 Button 元素没有 style 属性，所以除了在 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;

【讨论】：

【解决方案6】：

组件 Button 支持最低级别的自定义，因此您必须使用其他组件。

您可以使用：Pressable 或 TouchableOpacity，

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

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

Doc Button

【讨论】：