更新时间:2022-05-08 21:28:37
在文件 EmployeeList.js
中将导航作为道具传递给 ListItem.
in file EmployeeList.js
pass navigation as prop to ListItem.
renderRow(employee) {
return <ListItem employee={employee} navigation={this.props.navigation} />;
}
现在您应该可以使用 ListItem.js
中的 this.props.navigation
访问导航.
Now you should be able to access navigation using this.props.navigation
inside ListItem.js
.
只是一个观察,永远不要将方法绑定到渲染中的上下文函数被重复调用并创建一个新实例每一次.如下更改您的 ListItem.js
.
Just an observation, never bind methods to context inside the render function as it is called repeatedly and a new instance will be created each time. Change your
ListItem.js
as below.
class ListItem extends Component {
constructor(props) {
super(props);
this.onRowPress = this.onRowPress.bind(this); // here we bind it
}
onRowPress() {
this.props.navigation && this.props.navigation.navigate('EmployeeCreate');
}
render() {
const { item } = this.props.employee;
return (
<TouchableWithoutFeedback onPress={this.onRowPress}>
<View>
<CardSection>
<Text style={styles.titleSytle}>
{item.name}
</Text>
</CardSection>
</View>
</TouchableWithoutFeedback>
);
}
}