反应原生 Flatlist 导航

Posted 2023-04-13

【中文标题】反应原生 Flatlist 导航

【英文标题】：react native Flatlist navigation

【发布时间】：2018-04-17 09:57:53

【问题描述】：

我遇到了错误 TypeError：无法读取未定义的属性“导航”。我不明白如何将导航组件传递给每个子组件，因此当用户按下某个项目时，它可以使用 React Navigation 导航到 employeeEdit 组件。如果这很明显，我是新手对不起。

import React,  Component  from 'react';
import  FlatList  from 'react-native';
import  connect  from 'react-redux';
//import  R  from 'ramda';
import _ from 'lodash';
import  employeesFetch  from '../actions';
import  HeaderButton  from './common';
import ListEmployee from './ListEmployee';


class EmployeeList extends Component 
  static navigationOptions = ( navigation ) => (
    headerRight: (
      <HeaderButton onPress=() => navigation.navigate('employeeCreate')>
        Add
      </HeaderButton>
    )
  );

  componentWillMount() 
    this.props.employeesFetch();
  

  keyExtractor(item) 
    return item.uid;
  
  renderItem( item ) 
    return <ListEmployee employee=item navigation=this.props.navigation />;
  
  render() 
    return (
      <FlatList
      data=this.props.employees
      renderItem=this.renderItem // Only for test
      keyExtractor=this.keyExtractor
      navigation=this.props.navigation
      />
    );
  

const mapStateToProps = (state) => 
  const employees = _.map(state.employees, (val, uid) => ( ...val, uid ));
  return  employees ;
;

export default connect(mapStateToProps,  employeesFetch )(EmployeeList);

这是 ListEmployee 的代码

import React,  Component  from 'react';
import 
  Text,
  StyleSheet,
  TouchableWithoutFeedback,
  View
 from 'react-native';
import  CardSection  from './common';

class ListEmployee extends Component 

  render() 
  const  employee  = this.props;
  const  navigate  = this.props.navigation;
  const  textStyle  = styles;
  const  name  = this.props.employee;
    return (
      <TouchableWithoutFeedback onPress=() => navigate('employeeEdit',  employee )>
        <View>
          <CardSection>
            <Text style=textStyle>name</Text>
          </CardSection>
        </View>
      </TouchableWithoutFeedback>
    );
  


/**
 second argument in connect does 2 things. 1.  dispatches all actions creators
return action objects to the store to be used by reducers; 2. creates props
of action creators to be used by components
**/
export default ListEmployee;

const styles = StyleSheet.create(
  textStyle: 
    fontSize: 18,
    paddingLeft: 15,
  
);

【问题讨论】：

您能否包含将导航道具传递给EmployeeList（例如其父组件）的代码

【参考方案1】：

这是 ES6 的一个常见陷阱。别担心我的朋友，你只需要学习一次就可以避免它们再次出现。

长话短说，当你在 React Component 中声明一个方法时，让它成为箭头函数

所以，从这里改变。

renderItem( item )

到这里

renderItem = ( item ) =>

这应该可以解决您的问题，由于某些不方便的原因，如果您将方法声明为箭头函数，则只能访问“this”，但不能使用普通声明。

在您的情况下，由于 renderItem 不是箭头函数，因此“this”不是指反应组件，因此“this.props”可能是未定义的，这就是为什么它给您这个错误Cannot read property 'navigation' of undefined 因为

this.props.navigation = (undefined).navigation

【讨论】：

在我的情况下，问题出在按下列表项时调用的函数中。

【参考方案2】：

在您的 renderItem 方法中，您可以管理当用户按下您的 FlatList 中的一项时会发生什么：

renderItem( item ) 
    <TouchableOpacity onPress=() =>  this.props.navigator.push(id: 'employeeEdit') >
        <ListEmployee employee=item navigation=this.props.navigation />
    </TouchableOpacity>

希望对你有帮助！

【参考方案3】：

导航示例

这里的 VendorList 是渲染的结构

<FlatList
            numColumns=6
            data=state.vendoreList
            keyExtractor=(data) => data.id
            renderItem=( item ) =>
            <TouchableOpacity  onPress=() => props.navigation.navigate("Home1") >
             <VendorList item=item />
             </TouchableOpacity>
             
/>

【参考方案4】：

在员工名单中

const 导航= this.props.navigation;

这个用途

navigation.navigate('employeeEdit', employee )>

只需要修改这两行，我把文本加粗你需要做的改变