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

Posted 2023-04-13

【中文标题】如何在 React Native Android 中设置按钮的高度

【英文标题】：How to set the height of button in 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);

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

【参考方案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