react-native - React Native 找不到变量：导航

Question

我正在做堆栈导航，但我似乎无法导航我会收到此错误“找不到变量：导航”这是我的 android 模拟器的屏幕截图

这是我的应用程序类（主要）

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

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

这是我的 Cluster1 类

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>
        );
    }
    }

标签： react-native

Answer 1

导航对象只存在于屏幕组件中。（不存在于嵌套组件中）。您可以使用道具将其传递给嵌套组件

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>
        );
    }
}