React Native <ListItem onPress={...}> - 为什么要执行此函数？

Question

我刚刚开始全神贯注于 React Native，我正在使用 Redux 来管理 state，NativeBase library for my UI components and react-native-router-flux 正在处理视图之间的导航。

目前我正在构建一个从 guest 对象数组创建的基本列表。该列表存储在 Redux 存储中，我可以访问它并进行相应显示。列表中的每个项目都与 guests 数组中的 guest 相关联。我想让列表中的每个项目都可以触摸，然后将相关的 guest 对象作为属性传递给下一个视图以显示详细信息。

为此，我使用了 onPress 函数，它是与 ListItem 组件关联的标准函数（请参阅 react-native-router-flux 的 NativeBase 文档 here). I've also followed the documentation 并定义组件本身之外的导航操作，以便 ListItem 在按下时调用它，而不是每次呈现时调用它。

我的问题是我发现 onPress={goToView2(guest)} 函数在每次呈现 ListItem 时被调用，而不是在按下 ListItem 时被调用。

我相信一定是简单的东西被我遗漏了。有什么建议吗？

View1.js - 显示 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 - 显示 View1.js:

中所选 guest 的详细信息的视图

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;

Answer 1

努力做到<ListItem button onPress={() => {goToView2(guest)}}

Answer 2

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

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

如果您在函数中使用箭头函数，那么它只是 this.goToView2(guest) ...在渲染方法中编写箭头函数会导致性能问题...即使它可以忽略不计，最好避免它

React Native <ListItem onPress={...}> - 为什么要执行此函数？

React Native <ListItem onPress={...}> - why is this function executing?

javascript

react-native

native-base

react-native-router-flux