web-dev-qa-db-ger.com

So stellen Sie die Höhe der Schaltfläche in Reaktion native android

Ich lerne, native Programmierung für Android Mobile Apps. Ich erstelle einen Bildschirm, auf dem ich die Höhe von button. Einstellen muss. Ich habe button in view und stellen Sie die Höhe des verwendeten Stils ein, jedoch ändert sich die Knopfhöhe nicht.

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

Kann jemand mir helfen, die Höhe des Knopfes entsprechend meiner Anforderung einzustellen.

Danke im Voraus.

androidreactjsreact-nativereact-native-android
10
N Sharma

Diese Komponente verfügt über eingeschränkte Optionen, sodass Sie ihre Größe nicht auf ein festes height ändern können.

Ich empfehle Ihnen, die Komponente TouchableOpacity zu verwenden, um Ihre eigene Schaltfläche mit eigenen properties und styles zu erstellen.

Sie können es leicht so stylen:

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

Sie können die Schaltflächenbreite auf einfache Weise gemäß der angegebenen Breite einstellen, indem Sie die folgende Methode anwenden:

<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

Die beste Lösung ist die Verwendung von minHeight oder maxHeight anstelle von Height const.

0
user3107831