Question

我正在学习为Android移动应用程序做出本机编程。我正在创建一个屏幕，我需要将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);并设置使用样式的高度，但按钮高度没有变化。

overflow: hidden

任何人都可以帮我根据我的要求设置按钮的高度。

提前致谢。

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常量。

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>

样式表代码段

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

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

如何在本机android中设置按钮的高度

5 个答案: