反応するネイティブフラットリストナビゲーション

Question

エラーが発生しました TypeError：未定義のプロパティ 'navigation'を読み取ることができません。私は各子供にナビゲーションコンポーネントを渡す方法を理解していないので、ユーザーがアイテムを押すと、React Navigationを使用してemployeeEditコンポーネントにナビゲートできます。私は初心者ですが、これが明らかであればごめんなさい。

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

それはあなたを助けるホープ：

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のユーザープレス1つの項目が時に起こるものを管理することができます！

Answer 2

これはES6共通の落とし穴の1つです。私の友人を心配しないでください。もう一度それらを避けるために一度だけそれを学ばなければなりません。

かいつまんあなたがメソッドを宣言する際に、内部、それはとても機能

矢印作り、これからの変更をコンポーネントに反応します。

renderItem({ item }) {

この

renderItem = ({ item }) => {

何らかの不便な理由で、あなたの問題を解決する必要があります

、あなたのみアクセスでき、「この」あなたは、矢印の関数として、あなたの方法を宣言している場合ではなく、通常の宣言で。

あなたのケースでは、renderItemは矢印の関数ではないので、 "this"は反応コンポーネントを参照しないため、 "this.props"は未定義になる可能性が高いため、Cannot read property 'navigation' of undefined

this.props.navigation = (undefined).navigation