我正在学习Android移动应用程序的React原生编程.我正在制作一个屏幕,我需要将高度设置为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);

有人能帮我根据我的要求设置按钮的高度吗?

推荐答案

此组件的选项有限,因此无法将其调整为固定的height.

我建议您使用TouchableOpacity组件来构建自己的按钮,包括propertiesstyles.

你可以很容易地把它做成这样:

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

React-native相关问答推荐

使用NextJS映射从数组中提取用户角色

在Reaction Native With EXPO中播放来自OpenAI TTS API的音频响应

条件呈现Else语句不会将样式应用于我的组件

React Native:如何以编程方式对图像进行黑白过滤?

在 ReactNative 中调用 RCTDeviceEventEmitter.emit 时出错

React Native WebView 中的 Javascript console.log()

如何在react-native 中处理不同的屏幕尺寸?

在使用 redux-persist 重新水化存储之前加载初始状态的默认值

Yarn 在哪里存储离线包?

在本react-native中具有异步和等待的箭头函数

当组件在react-native 中重新呈现时,动态不透明度不会改变

使用离线包在 iOS 设备上运行 react-native 应用程序

使用条码 scanner 掩码的透明视图react-native相机

Animated.View 的样式props的Typescript定义

如何在样式组件之外获取主题?

DeviceInfo 原生模块未正确安装

React Native 发送短信

React Native onLayout 与 React Hooks

无法读取未定义的属性 string| React.PropTypes | LayoutPropTypes.js

StackNavigator中如何改变动画的方向?