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

Question

我正在学习 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);

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

样式sheet代码段

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

Answer 5

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

Answer 6

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

您可以使用：Pressable or TouchableOpacity ,

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

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

Doc Button

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

How to set the height of button in React Native Android

android

reactjs

react-native

react-native-android