Question

我正在进行堆栈导航，但我似乎无法导航我会收到此错误“无法找到变量：导航”Here is the screenshot of my android emulator

这是我的App类（主要）

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')

希望这有用。

React Native无法找到变量：导航

3 个答案: