Comment ajouter un bouton à Réagir Natif?

Im confus avec tout ce "pas de CSS" chose, mais je comprends pourquoi il est bénéfique. Tout ce que je veux faire est de placer un bouton dans le milieu de l'écran mais je ne comprends pas comment le style des œuvres de Réagir encore. C'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
  }
});

il y avait quelques errants des points-virgules et extra virgules avant l'edit -- je suppose que ceux qui étaient seulement des fautes de frappe. si non, vous voudrez peut-être chercher dans
Ce n'était pas une faute de frappe, mais je vous remercie. Cependant, je copie-collé édité le code et le simulateur est de lancer une erreur (l'écran est rouge). Une autre idée?
ah la frontière devrait avoir des guillemets autour d'elle: border: '1px solid blue',
Euh, pas de travail...
pouvez-vous définir le bouton marges pour tous "auto"? (n'ai pas joué avec réagissent-native beaucoup)
Vous ne pouvez pas définir les marges de boutons à l'auto. Si vous voulez que les boutons de film étirable pour modifier le lineItems la valeur de la propriété à 'stretch' dans l'exemple fourni.
Pourquoi n'est-il pas livré avec un bouton!?!?!

InformationsquelleAutor baristaGeek | 2015-04-26

34

Mise à jour: utiliser les haut -Composant Button.

Obsolète:

Envelopper votre point de 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>
    );
  }
});       
```
- où voir la console.log() de sortie?
- définissez le débogage dans le navigateur google chrome avec clic long pn l'écran et ouvrez le navigateur de la console.
- Pour info, le TouchableNativeFeedback doc a dit: At the moment it only supports having a single View instance as a child node. Le <Text> doit être enveloppé dans un View. Merci de modifier votre réponse afin que les gens ne font pas la même erreur.
- Augustin est à droite, le Texte de la balise doit être dans un Affichage de la balise comme ceci "<Affichage><style de Texte={les styles.buttonText}>Bouton!</Texte></View>", ou il y aura erreur d'exécution "de l'Invariant de la Violation: RawText Bouton! doit être enveloppé dans un explicite <Texte> composant".
- merci pour les conseils dans les commentaires. merci d'éditer réponse pour android: <TouchableElement style={les styles.bouton}> <affichage> <style de Texte={les styles.buttonText}>Bouton!</Texte> </view> </TouchableElement>
- Sur les versions plus récentes de réagir bind() est inutile, réagir donne cet avertissement: Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.
InformationsquelleAutor Yevgen Safronov
25

La réagir-native-bouton paquet fournit un bouton qui est comme un style natif bouton. L'installer avec npm install react-native-button et à utiliser 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!');
  },
});
```
- Vous devriez également ajouter --save, comme ceci: npm install react-native-button --save.
- pas de travail... mais j'Ai cette erreur: Erreur: le besoin d'module inconnu "réagissent-native-bouton". mais j'ai installé le paquet avant de l'utiliser
- Essayez de redémarrer le gestionnaire de package.
- Cela ressemble natif sur iOS, pas sur Android.
- Fonctionne, mais il ne semble pas être possible à la verticale du centre le texte à l'intérieur du bouton si le bouton est plus grand que le texte. Cf. github.com/ide/react-native-button/issues/9. Des idées?
- À l'aide de TouchableHighlight vous pouvez centrer le texte avec justifyContent: 'centre'
- ce n'accessibilityLabel n'.. aucune idée !
- utilisé par les lecteurs d'écran je pense.
InformationsquelleAutor ide

Vous pouvez utiliser construite en réaction natif élément de Bouton.

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

Comment ajouter un bouton à Réagir Natif?

Lire Plus Ici.

InformationsquelleAutor Ashok R

1

Vous avez deux options pour obtenir un toucher composant/bouton pour gérer les événements de l'utilisateur.
- Est d'utiliser le construit en Button Composant. Vérifiez les docs ici http://facebook.github.io/react-native/docs/button.html
- Deux utiliser TouchableHighlight ou TouchableNativeFeedback ou TouchableOpacity ou TouchableWithoutFeedback. Pensez à cela comme un moyen pour vous de convertir les différents domaines de votre application tappable(cliquable) ou un moyen pour vous de créer un bouton personnalisé.
  Chaque composante est différent en fonction de comment il se comporte une fois qu'il est tapé par l'utilisateur. Vérifiez la documentation pour plus de détails. http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html etc.
Concernant le style de réagir natifs, vous aurez besoin de comprendre flexbox mise en page. Cochez cette css flexbox article toutes les règles sont applicables à réagir indigènes https://css-tricks.com/snippets/css/a-guide-to-flexbox/ sauf que vous aurez à capitaliser les règles de l'e.g align-content à alignContent

InformationsquelleAutor kabangi julius

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

InformationsquelleAutor Aymen

0

Veuillez vérifier réagir indigènes du doc concernant les boutons

Vous avez plus d'une façon d'ajouter un bouton dans votre application et le style qu'il

Vous pouvez utiliser le Bouton tag et n'ont qu'un moyen de style par attribut de couleur, il va figurant dans différente IOS que Android, ou en mettant le bouton affichage de la balise avec le style

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

Et vérifier la TouchableOpacity et TouchableNativeFeedback tags

Et de prendre un verrou sur le lien ci-dessous pour plus d'options pour ajouter des boutons personnalisés dans votre application

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

InformationsquelleAutor Montaser Almohasen

Vous devez vous connecter pour publier un commentaire.