web-dev-qa-db-fra.com

Comment ajouter un bouton dans React Native?

Je suis confondu avec tout ce truc "pas de CSS", mais je comprends pourquoi c'est bénéfique. Tout ce que je veux faire est de placer un bouton au milieu de l'écran mais je ne comprends pas encore comment le style fonctionne dans React. Ceci est mon code:

var tapSpeed = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Tap me as fast as you can!
        </Text>
        <View style={styles.button}>
        !
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFCCCC'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  button: {
    textAlign: 'center',
    color: '#ffffff',
    marginBottom: 7,
    border: 1px solid blue,
    borderRadius: 2px
  }
});
javascriptreactjsreact-native
43
baristaGeek

Mise à jour: utilise le composant intégré composant du bouton .

Obsolète:

Enveloppez votre vue dans TouchableHighlight pour iOS et TouchableNativeFeedback pour Android.

var {
  Platform,
  TouchableHighlight,
  TouchableNativeFeedback 
} = React;

var tapSpeed = React.createClass({
  buttonClicked: function() {
    console.log('button clicked');
  },
  render: function() {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'Android') {
     TouchableElement = TouchableNativeFeedback;
    }
    return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Tap me as fast as you can!
      </Text>
      <TouchableElement
        style={styles.button}
        onPress={this.buttonClicked.bind(this)}>
        <View>
          <Text style={styles.buttonText}>Button!</Text>
        </View>
      </TouchableElement>        
    </View>
    );
  }
});
34
Yevgen Safronov

Le paquet react-native-button fournit un bouton dont le style est semblable à celui d'un bouton natif. Installez-le avec npm install react-native-button et utilisez-le dans votre composant comme ceci:

var Button = require('react-native-button');

var ExampleComponent = React.createClass({
  render() {
    return (
      <Button
        style={{borderWidth: 1, borderColor: 'blue'}}
        onPress={this._handlePress}>
        Press Me!
      </Button>
    );
  },

  _handlePress(event) {
    console.log('Pressed!');
  },
});
25
ide

Vous pouvez utiliser l'élément Button réactif natif. 

import React, { Component } from 'react';
import { StyleSheet, View, Button, Alert, AppRegistry } from 'react-native';

class MainApp extends Component {

_onPress() {
  Alert.alert('on Press!');
 }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button onPress={this._onPress} title="Hello" color="#FFFFFF" accessibilityLabel="Tap on Me"/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 10,
    shadowOpacity: 0.25
  }
})

AppRegistry.registerComponent('MainApp', () => MainApp);

enter image description here

Lire la suite ici .

25
Ashok R
<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>
1
Aymen

Vous avez deux options pour créer un composant/bouton tactile permettant de gérer les événements de l'utilisateur.

  • La première consiste à utiliser le composant intégré Button. Vérifiez la documentation ici http://facebook.github.io/react-native/docs/button.html
  • Deux utilisent soit TouchableHighlight ou TouchableNativeFeedback ou TouchableOpacity ou TouchableWithoutFeedback. Pensez-y comme un moyen pour vous de convertir différentes zones de votre application en une surface tappable (cliquable) ou un moyen de créer un bouton personnalisé. Chaque composant ici est différent en fonction de la manière dont il se comporte une fois qu'il est exploité par l'utilisateur. Vérifiez la documentation pour plus de détails. http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html etc.

En ce qui concerne le style dans réagit native, vous devez comprendre flexbox. Cochez cette css flexbox article) toutes les règles sont applicables à réag-natif https: //css-tricks.com/snippets/css/a-guide-to-flexbox/ sauf que vous devrez capitaliser les règles, par exemple align-content à alignContent

1
kabangi julius

S'il vous plaît vérifier réact-native doc's en ce qui concerne les boutons

Vous avez plus d'un moyen d'ajouter un bouton dans votre application et de le styler.

Vous pouvez utiliser la balise Button et son attribut de style par couleur est unidirectionnel; elle apparaîtra dans IOS différent de celui utilisé par Android, ou en plaçant le bouton dans la balise avec style

<View style={style.buttonViewStyle}> <Button title="Facebook" color="blue" onPress={this.onFacebookPress} /> </View>

Et vérifiez les balises TouchableOpacity et TouchableNativeFeedback

Et verrouillez le lien ci-dessous pour plus d'options pour ajouter des boutons personnalisés à votre application.

https://js.coach/react-native/react-native-action-button?search=button

0
Montaser Almohasen