web-dev-qa-db-fra.com

Comment définir la hauteur du bouton dans react native android

J'apprends la programmation native react pour Android applications mobiles. Je crée un écran où je dois définir la hauteur de button. J'ai ajouté button dans view et défini la hauteur d'utilisation du style mais il n'y a pas de changement sur la hauteur du bouton.

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

Quelqu'un peut-il m'aider à régler la hauteur du bouton selon mes besoins.

Merci d'avance.

androidreactjsreact-nativereact-native-android
10
N Sharma

Ce composant a des options limitées, vous ne pouvez donc pas le redimensionner en height fixe.

Je vous recommande d'utiliser le composant TouchableOpacity pour créer votre propre bouton, avec vos propres properties et styles.

Vous pouvez facilement le coiffer comme ceci:

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

Vous pouvez facilement définir la largeur du bouton selon la largeur mentionnée en utilisant la méthode suivante:

<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

La meilleure solution consiste à utiliser minHeight ou maxHeight au lieu d'utiliser Hauteur const.

0
user3107831