web-dev-qa-db-fra.com

React Native <ListItem onPress = {...}> - pourquoi cette fonction s'exécute-t-elle?

Je commence tout juste à faire le tour de ma tête React Native et j'utilise Redux pour la gestion de state, la bibliothèque NativeBase pour mes composants d'interface utilisateur et react-native-router-flux gère la navigation entre les vues.

Actuellement, je construis une liste de base qui est créée à partir d'un tableau d'objets guest. La liste est stockée dans la boutique Redux et je peux y accéder et l'afficher en conséquence. Chaque élément de la liste est associé à un guest dans un tableau guests. Je voudrais rendre chaque élément de la liste accessible, puis passer l'objet guest pertinent en tant que propriété à la vue suivante pour afficher les détails.

Pour ce faire, j'utilise la fonction onPress qui est une fonction standard associée au composant ListItem (voir la documentation NativeBase ici ). J'ai également suivi la documentation pour react-native-router-flux Et défini l'action de navigation en dehors du composant lui-même de sorte que ListItem l'appelle lorsqu'il est pressé et non à chaque fois qu'il s'affiche .

Mon problème est que je constate que la fonction onPress={goToView2(guest)} est appelée chaque fois que ListItem est rendue plutôt que spécifiquement lorsque vous appuyez sur ListItem.

Je suis sûr que ce doit être quelque chose de simple que j'ai omis. Aucune suggestion?

View1.js - vue qui affiche la liste initiale de guests:

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
  Text, List, ListItem } from 'native-base';
import { connect } from 'react-redux';
import { Actions as NavigationActions } from 'react-native-router-flux';

class View1 extends Component {
  render() {

    // This is the function that runs every time a ListItem component is rendered. 
    // Why is this not only running on onPress?

    const goToView2 = (guest) => {
      NavigationActions.view2(guest);
      console.log('Navigation router run...');
    };

    return (
      <Container>
        <Header>
          <Title>Header</Title>
        </Header>


        <Content>
          <List
            dataArray={this.props.guests}
            renderRow={(guest) =>
              <ListItem button onPress={goToView2(guest)}>
                <Text>{guest.name}</Text>
                <Text note>{guest.email}</Text>
              </ListItem>
            }
          >
          </List>
        </Content>

        <Footer>
          <FooterTab>
            <Button transparent>
              <Icon name='ios-call' />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  console.log('mapStateToProps state', state);
  return { guests: state.guests };
};

export default connect(mapStateToProps)(View1);

View2.js - vue qui affiche les détails du guest sélectionné dans View1.js:

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
  Text, List, ListItem } from 'native-base';

class View2 extends Component {
    render() {
        console.log('View2 props: ', this.props);

        return (
            <Container>
                <Header>
                    <Title>Header</Title>
                </Header>

                <Content>
                <Content>
                <List>
                    <ListItem>
                        <Text>{this.props.name}</Text>
                    </ListItem>
                </List>
            </Content>
                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

export default View2;
javascriptreact-nativereact-native-router-fluxnative-base
12
oldo.nicho

Essayez de faire <ListItem button onPress={() => {goToView2(guest)}}

36
philippsh
const goToView2 = (guest) => {
      NavigationActions.view2(guest);
      console.log('Navigation router run...');
    };

<ListItem button onPress={this.goToView2(guest)}>

si vous utilisez la fonction flèche dans la fonction, alors c'est juste ceci.

2
rajeshzmoke