React Native 找不到变量：导航

Question

I am doing stack navigation but I can't seem to be able to navigate I will get this error "Can't find variable: navigate" Here is the screenshot of my android emulator

This is my App class(main)

export default class App extends Component {
render() {
return (
  <View style={styles.container}>
    <Header/>
    <AppNavigator/>
  </View>
);
}
}

const AppNavigator = StackNavigator({
Cluster1: { 
  screen: Cluster1,
  },
Play: { 
  screen: Play,
  },
});

This is my Cluster1 class

export default class Cluster1 extends Component{
render(){
    return(
        <View>
            <SectionList          
             
             renderSectionHeader={({ section }) => {
                return (<SectionHeader section={section} />);
            }}
             sections={ClusterData}
             keyExtractor={(item, index) => item.name}
        >
        </SectionList>
        </View>
    );
  }
} 
 class SectionHeader extends Component {
    render() {
        return (
            <View style={styles.header}>  
                <Text style={styles.headertext}>
                {this.props.section.title}       
                </Text>
                <TouchableOpacity onPress={() => { navigate("Play");}}>
                <Text style ={styles.Play}>Play
                </Text>
                </TouchableOpacity>
            </View>
        );
    }
    }

Answer 1

navigation object only exist in the screen component. (not exist in the nested components). you can pass it into the nested component using props

export default class Cluster1 extends Component{
render(){
    return(
        <View>
            <SectionList          

             renderSectionHeader={({ section }) => {
                return (<SectionHeader navigation={this.props.navigation} section={section} />);
            }}
             sections={ClusterData}
             keyExtractor={(item, index) => item.name}
        >
        </SectionList>
        </View>
    );
  }
} 
class SectionHeader extends Component {
    render() {
        return (
            <View style={styles.header}>  
                <Text style={styles.headertext}>
                {this.props.section.title}       
                </Text>
                <TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>
                <Text style ={styles.Play}>Play
                </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

Answer 2

Include on your SectionHeader the this.props.navigation something like this:

<SectionHeader navigation={this.props.navigation}/>

because the props.navigation are by default on your parent component

and on SectionHeader component you will access to navition like:

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

For me also was confusing before. Cheers!

Answer 3

You can use this rather than navigate :

this.props.navigation.navigate('Play')

Hope this is helpful.