反应本机 Flatlist 导航

Question

我收到错误消息类型错误：无法读取未定义的属性 'navigation'。我不明白如何将导航组件传递给每个子组件，因此当用户按下一个项目时，它可以使用 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,
  }
});

Answer 1

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

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

希望对你有帮助！

Answer 2

这是一个 ES6 常见的陷阱。朋友不用担心，学一次就可以避免一遍又一遍。

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

所以，从这个开始改变。

renderItem({ item }) {

至此

renderItem = ({ item }) => {

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

在你的例子中，由于 renderItem 不是箭头函数，"this" 没有被引用到反应组件，因此 "this.props" 很可能是未定义的，这就是它给你这个错误的原因Cannot read property 'navigation' of undefined 因为

this.props.navigation = (undefined).navigation

Answer 3

导航示例

这里的VendorList是渲染出来的结构

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

Answer 4

在 ListEmployee

中

常量{导航}=this.props.navigation;

这个用途

navigation.navigate('employeeEdit', { employee })}>

只需要修改这两行，我把文字加粗了你需要做的改动

反应本机 Flatlist 导航

react native Flatlist navigation

react-native

navigation

react-native-flatlist