反应原生平面列表导航
2017-11-04
15261
我收到错误 TypeError:无法读取未定义的属性“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,
}
});
3个回答
这是 ES6 常见的陷阱之一。别担心,我的朋友,你只需要学习一次就可以避免再次犯同样的错误。
长话短说,当你在 React Component 中声明一个方法时,请将其设为箭头函数
因此,从此更改。
renderItem({ item }) {{
更改为此
renderItem = ({ item }) => {{
这应该可以解决您的问题,出于某些不方便的原因,如果您将方法声明为箭头函数,则只能访问“this”,而不能使用正常声明。
在您的情况下,由于 renderItem 不是箭头函数,“this”不引用 react 组件,因此“this.props”很可能未定义,这就是为什么它给您这个错误
无法读取未定义的属性“navigation”
因为
this.props.navigation = (undefined).navigation
Doppio
2017-11-05
在您的 renderItem 方法中,您可以管理当用户按下 FlatList 中的一个项目时发生的情况:
renderItem({ item }) {
<TouchableOpacity onPress={() => { this.props.navigator.push({id: 'employeeEdit'})}} >
<ListEmployee employee={item} navigation={this.props.navigation} />
</TouchableOpacity>
}
希望它能帮助您!
Hernán Albertario
2017-11-05
导航示例
此处 VendorList 是渲染的结构
<FlatList
numColumns={6}
data={state.vendoreList}
keyExtractor={(data) => data.id}
renderItem={({ item }) =>
<TouchableOpacity onPress={() => props.navigation.navigate("Home1")} >
<VendorList item={item} />
</TouchableOpacity>
}
/>
Arun Prasad E S
2020-09-04