web-dev-qa-db-ja.com

反応ネイティブでボタンの高さを設定する方法android

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

誰でも私の要件に応じてボタンの高さを設定するのを手伝ってくれますか？.

前もって感謝します。

androidreactjsreact-nativereact-native-android
10
N Sharma

このコンポーネントのオプションは限られているため、固定のheightにサイズ変更することはできません。

TouchableOpacityコンポーネントとpropertiesおよびstylesを使用して、独自のボタンを作成することをお勧めします。

次のように簡単にスタイルを設定できます。

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

次の方法を使用して、上記の幅に従ってボタンの幅を簡単に設定できます。

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

enter image description here

1
sumit kumar pradhan

最善の解決策は、Height constを使用する代わりにminHeightまたはmaxHeightを使用することです。

0
user3107831