javascript - undefined 不是递归组件上的对象（评估“_this2.props.navigation.navigate”）

Question

设置路由器后：

PostShow > 评论 > 评论 > 回复 postShow 属于 stackNavigator！

当点击评论组件去回复时

显示此错误：

undefined 不是对象（评估 '_this2.props.navigation.navigate'）

在搜索文档和 react-navigation 问题页面以及这里之后

该解决方案似乎将 navigation={this.props.navigation} 放在子组件上，因为它不在堆栈内。但经过一番尝试后仍然显示相同的错误！

然后其他解决方案是在父组件上使用 withNavigation ，仍然不重定向到回复屏幕！

那么，当组件是递归的或不在堆栈或任何导航组件下时，有人可以澄清如何正确使用导航？

<router>    

    export const HomeStack = createStackNavigator({
      Home: {
        screen: Home
      },

      PostShow: {
        screen: PostShow,

        navigationOptions: ({ navigation }) => ({
          title: `${navigation.state.params.post.title}`,
          headerTitleStyle,
          headerStyle
        })
      }
    });

    The postSHow component with:

    <postShow>

import React, { Component } from "react";
import {
  View,
  Text,
  Image,
  KeyboardAvoidingView,
  TextInput,
  StyleSheet,
  ScrollView,
  TouchableOpacity,

} from "react-native";


import Comments from "../components/Comments";

class PostShow extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "",
      body: "",
      comments: [],
      comment: "",
      authToken: "",

      position: 1
    };

  }

  componentDidMount() {

    this.getComments();
  }

   async getComments();

  render() {
    const { title, body } = this.state;

    return (
      <View style={{ flex: 1 }}>
        <ScrollView>
          <Text>{title}</Text>
          <Comments
            comments={this.state.comments}

            //navigation={this.props.navigation}
            //navigate={this.props.navigation.navigate}
          />
        </ScrollView>
        <View>
          <View >
            <KeyboardAvoidingView

              keyboardVerticalOffset={80}
              behavior={"padding"}
              style={{
                flex: 1
              }}

            >
              <TextInput
                value={this.state.comment}
                underlineColorAndroid="transparent"
                placeholder="Type something nice"
                onChangeText={text => this.setState({ comment: text })}
              />

              <TouchableOpacity
                style={styles.button}
                onPress={this.submitComment.bind(this)}
              >

                <Text>Send</Text>
              </TouchableOpacity>
            </KeyboardAvoidingView>
          </View>
        </View>
      </View>
    );
  }
}


export default PostShow;

  The comments/comment 
  <comments/comment>


    import Comment from "./Comment";

    class Comments extends Component {

      render() {
        var comments =
          this.props.comments &&
          this.props.comments.map(comment => {
            return (
              <View key={comment.id} style={styles.commentContainer}>
                <Comment
                  // navigate={this.props.navigation.navigate}
                  navigation={this.props.navigation}
                  comment={comment}

                />
              </View>
            );
          });

        return <View>{comments}</View>;
      }
    }

    export default Comments;





I'd like to on comment component be able to click on reply and redirect to the screen Reply


        import React, { Component } from "react";

    import { View, Text } from "react-native";

    import Comments from "./Comments";
    import Reply from "./Reply";

    import { withNavigation } from "react-navigation";
    class Comment extends Component {


      render() {
        const comment = this.props.comment;
        const { navigation } = this.props;
        return (
          <View>
            <Text style={styles.body}>{comment.comment} </Text>
            <Text
              style={{ color: "blue" }}
              onPress={() => this.props.navigation.navigate("Reply")}

            >
              Reply
            </Text>

            <Comments
              // navigation={this.props.navigation}
              // navigate={this.props.navigation.navigate}
              comments={comment.replies}

            />
          </View>
        );
      }
    }

    export default Comment;

标签： javascriptreactjsreact-nativereact-navigation

Answer 1

如果你Comment在Comments课堂上使用，你应该转发data.

            <Comment
              // navigate={this.props.navigation.navigate}
              navigation={this.props.navigation.navigate("Reply")}
              comment={comment}

            />
...

    const { navigation } = props;
    return (
      <View>
        <Text style={styles.body}>{comment.comment} </Text>
        <Text
          style={{ color: "blue" }}
          onPress={() => navigation}

        >

道具与状态