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

Answer 1

導航對象只存在於屏幕組件中。 （不存在於嵌套組件中）。 您可以使用 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

在你的 SectionHeader 中包含this.props.navigation是這樣的：

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

因為props.navigation默認在你的父組件上

在 SectionHeader 組件上，您將訪問導航，如：

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

對我來說之前也很困惑。 干杯!

Answer 3

您可以使用它而不是導航：

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

希望這是有幫助的。