在列表视图中导航时出现问题

我是RN的新手，我正在寻找解决此问题的方法。我在网上找到了很多信息，但仍然不起作用。

这是我的初始代码：

import { StackNavigator, NavigationActions } from 'react-navigation';
...

我从数据源填充列表项的函数：

list(rowData, sectionID, rowID) {
  var onPress = () => this.props.navigation.goBack();
  return (
    <ListItem thumbnail onPress={onPress}>
      <Body>
        <Text>{rowData.Title}</Text>
        <Text numberOfLines={2}>
          <Icon name="map-marker" size={15} color="grey" />
          {rowData.Address}, {rowData.City} ({rowData.Distance} km)
        </Text>
        <Text numberOfLines={3}>{rowData.Description}</Text>
      </Body>
      {VerifiedUser}
    </ListItem>
  );
}

onPress 操作向我发送错误消息：

未定义不是对象（评估 '_this2.props.navigation.goBack（）'

 render() {        
   return(    
     <Container> 
       <View style={styles.fill}>
         <ScrollView style={styles.fill}>
           <View style={styles.scrollViewContent}>
             <ListView
               dataSource={this.state.dataSource}
               renderRow={this.list.bind(this)} 
               enableEmptySections={true}
             />    
           </View>    
         </ScrollView>
       </View>
     </Container>
   );
 }

似乎没有重新认识。对此错误有任何帮助吗？

谢谢！

我假设您使用的是ListView并且list是renderRow函数的函数。您的错误是由this未绑定引起的。您可以在 React Documentation for Handling Event 上阅读更多相关信息。

您需要绑定函数以在其中使用 this。你有几个选择。

第一个选项是内联绑定它，

<ListView renderRow={this.list.bind(this)} />

第二个选项是在构造函数中绑定，

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.list = this.list.bind(this);
  }
  list(rowData, sectionID, rowID) {
    // ...
  }
  render() {
    return(<ListView renderRow={this.list} />)
  }
}

第三个选项是使用箭头函数，

class SomeComponent extends React.Component {
  list = (rowData, sectionID, rowID) => {
    // ...
  }
  render() {
    return(<ListView renderRow={this.list} />)
  }
}

相关内容

最新更新

热门标签：