且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

无法在反应导航中读取未定义的属性“导航"

更新时间: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>
    );
  }
}