React Native：如何通过TouchableOpacity导航至Play页面？

看起来你的问题出在两个关键地方：重复定义导航器实例，以及子组件没拿到正确的navigation属性。咱们一步步来修复：

1. 移除SectionHeader里多余的StackNavigator #

你在SectionHeader类里重新定义了一遍AppNavigator，这会创建一个全新的导航器实例，和根组件App里的导航器完全独立，自然没法实现跨页面跳转。直接删掉这段冗余代码：

// 删掉这段完全多余的代码！
const AppNavigator = StackNavigator({
  Cluster1: { screen: Cluster1},
  Play: { screen: Play},
});

2. 给SectionHeader传递正确的navigation属性 #

SectionHeader是Cluster1的子组件，默认不会自动获取到根导航器的navigation对象，你需要从Cluster1手动把这个属性传递过去。修改Cluster1里的renderSectionHeader方法：

renderSectionHeader={({ section }) => {
  // 将Cluster1的navigation prop传递给SectionHeader
  return (<SectionHeader section={section} navigation={this.props.navigation} />);
}}

3. 确认TouchableOpacity的点击逻辑 #

你的TouchableOpacity里的跳转代码本身是正确的，只要拿到了根导航器的navigation对象，就能正常触发页面跳转：

<TouchableOpacity onPress={() => {this.props.navigation.navigate('Play')}}>
  Play
</TouchableOpacity>

额外小修复 #

你提供的Play类代码末尾有个多余的{，记得删掉避免语法错误：

export default class Play extends Component{
  static navigationOptions = {
    headerMode: 'none',
  };
  render(){
    return(
      <View style={styles.container}>
        <Text>Play Screen</Text>
      </View>
    );
  }
}
// 删掉这里多余的 {

做完这些修改后，点击Play按钮应该就能正常跳转到Play页面啦！

内容的提问来源于stack exchange，提问作者user9673740